javascript - AngularJS 显示 JSON 数据

Question

我正在学习 AngularJS 并设置了项目结构，但是当我调用返回 JSON 的 API 时，我无法在 html 中显示它。

想法是您点击按钮，返回的结果将显示在{{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();

    }

}]);

服务:

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 使用正确的响应成功。我现在如何获取要在 HTML 中显示的数据。

Answer 1

Angular 有一个 Json 过滤器，您可以在返回 json 后将其添加到实际的绑定(bind)表达式中。

{{ answer | json }}

如果您想要响应中的实际 json，可以在响应对象的 data 属性中找到它。

response.data

改进建议:

我还为您的 http get 方法提供了一个“更好”的缩写，我认为它实际上更好，因为它会处理抛出的任何异常，而不是在您的代码中使用错误回调案例。

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