AngularJS Hiển thị dữ liệu JSON

Question

Tôi đang học AngularJS và có cấu trúc của dự án được thiết lập nhưng khi tôi gọi API trả về JSON, tôi không thể hiển thị nó trong html.

Ý tưởng là bạn nhấp vào nút và kết quả được trả lại sẽ được hiển thị trong {{answer}}.

HTML:

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

Bộ điều khiển:

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

    $scope.search = function() { 

     $scope.answer = personSearch.findPlayer(); 

    } 

}]); 

dịch vụ:

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 được đánh thành công với câu trả lời đúng. Làm thế nào bây giờ tôi có được dữ liệu để hiển thị trong HTML.

Answer 1

You are not gán bất kỳ dữ liệu vào answer (trên thực tế giao undefined) vì findPlayer không trả lại bất cứ điều gì.

Vì vậy, trước hết, bạn cần phải thực hiện đối tượng phương pháp dịch vụ trả lại lời hứa:

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

sau đó tiêu thụ nó trong bộ điều khiển:

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

Answer 2

Góc có bộ lọc Json mà bạn có thể thêm vào biểu thức ràng buộc thực tế, sau khi bạn có lại json.

{{ answer | json }} 

Nếu bạn muốn thực tế json từ phản hồi, bạn có thể tìm thấy nó trong thuộc tính data của đối tượng phản hồi.

response.data 

Cải gợi ý:

Tôi cũng đã cung cấp một 'đẹp' tay ngắn cho http get phương pháp của bạn mà tôi nghĩ nó thực sự tốt hơn bởi vì nó sẽ xử lý bất kỳ trường hợp ngoại lệ đó được ném hơn sử dụng lỗi gọi lại trong trường hợp của bạn.

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

Answer 3

Hãy đăng nhập đối tượng JSON này và tìm ra proporty bạn muốn hiển thị

{answer: "a"} 

sau đó chế độ xem của bạn sẽ như

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

và trả lại dữ liệu từ chức năng findPlayer hoặc hứa