[英]AngularJS Display JSON Data
I am learning AngularJS and have the structure of the project set up but when i call the API that returns me JSON i can't display that in the html. 我正在学习AngularJS并且已经设置了项目的结构,但是当我调用返回JSON的API时,我无法在html中显示它。
The idea is you click on the button and the returned result will be displayed in {{answer}} . 您的想法是单击按钮,返回的结果将显示在{{answer}}中 。
HTML: 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;
});
};
});
The URL is hitting success with the correct response. URL正在响应成功。 How do I now get the data to display in the HTML.
我现在如何获取要在HTML中显示的数据。
Angular has a Json filter you can add to the actual binding expression, once you have the json back. 一旦你有了json,Angular有一个Json过滤器可以添加到实际的绑定表达式中。
{{ answer | json }}
If you want the actual json from the response, you can find it in the data
property of the response object. 如果需要响应中的实际json,可以在响应对象的
data
属性中找到它。
response.data
Improvement suggestion: 改进建议:
I've also provided a 'nicer' short hand for your http
get method which I think its actually better because it'll handle any exceptions that gets thrown rather than using an error callback in your case. 我还为你的
http
get方法提供了一个'更好'的短手,我觉得它实际上更好,因为它会处理任何被抛出的异常,而不是在你的情况下使用错误回调。
return $http.get(apiUrl)
.then(successCB)
.catch(errorCB);
You are not assigning any data to the answer
(actually assigning undefined
) because findPlayer
doesn't return anything. 您没有为
answer
分配任何数据(实际上分配undefined
),因为findPlayer
不返回任何内容。
So first of all, you need to make service method return promise object: 首先,您需要创建服务方法返回promise对象:
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;
});
};
then consume it in controller: 然后在控制器中使用它:
$scope.search = function () {
personSearch.findPlayer().then(function(data) {
$scope.answer = data;
});
}
Please log this JSON object and figure out proporty you want display 请记录此JSON对象并确定要显示的比例
{answer: "a"}
then your view will be as 然后你的观点将是
<div>Answer: {{answer.answer}}</div>
and return data from findPlayer function or promise 并从findPlayer函数或promise返回数据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.