web-dev-qa-db-fra.com

AngularJS Afficher les données JSON

J'apprends AngularJS et la structure du projet est configurée, mais lorsque j'appelle l'API qui me renvoie JSON, je ne peux pas l'afficher dans le code HTML.

L'idée est de cliquer sur le bouton et le résultat renvoyé sera affiché dans {{answer}} .

HTML:

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

Manette:

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

    $scope.search = function () {

        $scope.answer = personSearch.findPlayer();

    }

}]);

Un service:

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;

        });

    };

});

L'URL rencontre le succès avec la réponse correcte. Comment puis-je maintenant obtenir les données à afficher dans le code HTML.

javascripthtmlangularjsjson
8
Ben Clarke

Vous n'affectez aucune donnée à la answer (en assignant undefined) car findPlayer ne renvoie rien. 

Donc, tout d’abord, vous devez faire en sorte que l’objet promis de la méthode de service revienne:

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;
    });
};

puis consommez-le dans le contrôleur:

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

Angular a un filtre Json que vous pouvez ajouter à l'expression de liaison réelle une fois que vous avez récupéré le Json.

{{ answer | json }}

Si vous voulez le json réel de la réponse, vous pouvez le trouver dans la propriété data de l'objet réponse.

response.data

Proposition d'amélioration:

J'ai également fourni une "meilleure" main courte pour votre méthode http get qui, à mon avis, est meilleure car elle gérera toutes les exceptions lues plutôt que d'utiliser un rappel d'erreur dans votre cas.

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

Veuillez enregistrer cet objet JSON et déterminer la proportion que vous souhaitez afficher.

{answer: "a"}

alors votre vue sera aussi 

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

et renvoyer des données de la fonction findPlayer ou de la promesse 

1
Abdelrahman M. Allam