AngularJS Anzeige JSON Daten

Question

Ich lerne AngularJS und habe die Struktur des Projekts eingerichtet, aber wenn ich die API aufrufen, die mir JSON zurückgibt, kann ich das im HTML nicht anzeigen.

Die Idee ist, klicken Sie auf die Schaltfläche, und das zurückgegebene Ergebnis wird in angezeigt {{antwort}}.

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

    } 

}]); 

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; 

     }); 

    }; 

}); 

Die URL trifft Erfolg mit der richtigen Antwort. Wie bekomme ich jetzt die Daten zur Anzeige im HTML?

Answer 1

Sie zuweisen keine Daten an die answer (eigentlich Zuordnung undefined), weil findPlayer gibt nichts zurück.

Also zunächst einmal, müssen Sie Service-Methode Rendite versprechen Objekt machen:

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

dann verbrauchen sie in der Steuerung:

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

Answer 2

Angular hat einen Json-Filter, den Sie dem tatsächlichen Bindungsausdruck hinzufügen können, sobald Sie den JSON zurück haben.

{{ answer | json }} 

Wenn Sie die tatsächliche json aus der Antwort möchten, können Sie es in der data Eigenschaft des Response-Objekt finden.

response.data 

Verbesserungsvorschlag:

Ich habe auch eine ‚schöne‘ kurzerhand für Ihre http get-Methode, die ich denke, es ist eigentlich besser, weil es keine Ausnahmen behandeln wird, die eher geworfen werden als Verwenden Sie in Ihrem Fall einen Fehlerrückruf.

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

Answer 3

Bitte melden Sie sich dieses Objekt JSON und herauszufinden proporty Sie wollen

Anzeige

{answer: "a"} 

dann Ihre Ansicht wird wie

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

und geben Daten aus findPlayer Funktion oder versprechen