AngularJS Display JSON Data

Question

Uczę się AngularJS i mam skonfigurowaną strukturę projektu, ale kiedy zadzwonię do API, który zwraca mi JSON, nie mogę tego wyświetlić w html.

Pomysł polega na kliknięciu przycisku, a zwracany wynik zostanie wyświetlony w {{answer}}.

HTML:

<div ng-app="xileapp"> 
    <div ng-controller="searchController"> 
     <input type="button" ng-click="search()" value="search" /> 
     <div>Answer: {{answer}}</div> 
    </div> 
</div> 

Kontroler:

xile.controller('searchController', ['personSearch', '$scope', function (personSearch, $scope) { 

    $scope.search = function() { 

     $scope.answer = personSearch.findPlayer(); 

    } 

}]); 

Usługa:

xile.service('personSearch', function ($http) { 



    this.findPlayer = function() { 

     $http({ 
     method: 'GET', 
     url: 'https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/Crucify?api_key=222015c4-0898-4f6b-a7d5-2a23c3e0344d' 
      }).then(function successCallback(response) { 
      // this callback will be called asynchronously 
      // when the response is available 
      return response; 

      }, function errorCallback(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
      return response; 

     }); 

    }; 

}); 

URL trafia sukces z poprawną odpowiedzią. Jak mogę teraz uzyskać dane do wyświetlenia w kodzie HTML.

Answer 1

Nie jesteś przypisując żadnych danych do answer (właściwie przypisywania undefined), ponieważ findPlayer nic nie wróci.

Więc przede wszystkim trzeba wykonać przedmiot metoda usługa powrót obietnica:

this.findPlayer = function() { 

    var url = 'https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/Crucify?api_key=222015c4-0898-4f6b-a7d5-2a23c3e0344d'; 

    return $http({ 
     method: 'GET', 
     url: url 
    }).then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     return response.data; 
    }, function errorCallback(response) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     return response; 
    }); 
}; 

następnie spożywają go w kontrolerze:

$scope.search = function() { 
    personSearch.findPlayer().then(function(data) { 
     $scope.answer = data; 
    }); 
} 

Answer 2

Angular ma filtr Json, który można dodać do rzeczywistego wyrażenia wiążącego, po odzyskaniu json.

{{ answer | json }} 

Jeśli chcesz rzeczywistej json z odpowiedzi, można go znaleźć na własność obiektu odpowiedzi data.

response.data 

Poprawa sugestia:

Ja również dostarczył „ładniejszy” krótką rękę do http get metody, która myślę, że rzeczywiście lepiej, ponieważ będzie ona obsługiwać żadnych wyjątków, że zostaje wrzucony zamiast używając wywołania błędu w twoim przypadku.

return $http.get(apiUrl) 
      .then(successCB) 
      .catch(errorCB); 

Answer 3

Zaloguj ten obiekt JSON i dowiedzieć się proporty chcesz wyświetl

{answer: "a"} 

następnie Twój widok będzie być jak

<div>Answer: {{answer.answer}}</div> 

i powrót danych z funkcją findPlayer lub obiecują