AngularJS Display JSON Data

Question

Sto imparando AngularJS e ho impostato la struttura del progetto ma quando chiamo l'API che mi restituisce JSON non posso visualizzarlo in html.

L'idea è di fare clic sul pulsante e il risultato restituito verrà visualizzato in {{answer}}.

HTML:

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

Controller:

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

    $scope.search = function() { 

     $scope.answer = personSearch.findPlayer(); 

    } 

}]); 

Servizio:

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 sta colpendo il successo con la risposta corretta. Come faccio ora a visualizzare i dati nell'HTML.

Answer 1

Non stanno assegnando i dati al answer (in realtà l'assegnazione undefined) perché findPlayer non restituisce nulla.

Quindi prima di tutto, è necessario effettuare oggetto metodo di servizio di ritorno promessa:

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

quindi consumare nel controllore:

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

Answer 2

Angolare ha un filtro Json che è possibile aggiungere all'espressione di rilegatura effettiva, una volta che si restituisce il json.

{{ answer | json }} 

Se si desidera che il JSON reale dalla risposta, lo si può trovare nella data proprietà dell'oggetto risposta.

response.data 

Miglioramento suggerimento:

Ho anche fornito un 'bello' mano corta per il vostro http metodo get che credo la sua realtà migliore perché occuperemo di gestire le eccezioni che si butta, piuttosto che utilizzando un callback di errore nel tuo caso.

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

Answer 3

il login questo oggetto JSON e capire proporty vuoi display

{answer: "a"} 

quindi il tuo punto di vista essere il più

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

e restituire i dati da funzione findPlayer o promettere