我有一系列 twitch 主播的昵称。现在,我想调用他们的 API 来检索有关 channel 的数据,并将其附加到原始 JSON 对象,以便在我的解决方案的前端使用它。
现在,当我 console.log $https 调用的结果时,我将结果作为记录到控制台的对象,但我无法弄清楚为什么它不将其附加到原始流数组并将其显示在我的 HTML。
感谢任何帮助
我的html:
<div ng-app="twitchAPI" ng-controller="streamController">
{{ error }}
<div>
{{ streams }}
</div>
</div>
我的应用程序:
var twitchAPI = angular.module('twitchAPI', []);
twitchAPI.controller('streamController', function($scope, $http) {
$scope.streams = [{
'nick': 'freecodecamp'
}, {
'nick': 'storbeck'
}, {
'nick': 'terakilobyte'
}, {
'nick': 'habathcx'
}, {
'nick': 'RobotCaleb'
}, {
'nick': 'thomasballinger'
}, {
'nick': 'noobs2ninjas'
}, {
'nick': 'beohoff'
}, {
'nick': 'brunofin'
}, {
'nick': 'comster404'
}, {
'nick': 'RiotGamesBrazil'
}];
var onInfoReceived = function(response) {
return response.data;
}
var onInfoError = function(reason) {
$scope.error = "Could not fetch the information!"
}
var getStreamInfo = function(nick) {
$http.jsonp('https://api.twitch.tv/kraken/channels/' + nick + '?callback=JSON_CALLBACK')
.then(onInfoReceived, onInfoError);
}
for (var x in $scope.streams) {
$scope.streams[x].nick.channelInfo = getStreamInfo($scope.streams[x].nick);
};
});
我还创建了一个 codepen的事情,因为这是一个 freeCodeCamp 练习。
最佳答案
第一件事,您应该从 getStreamInfo
方法返回一个 promise ,以便您可以在其上实现 promise 链。然后在处理循环中的异步调用时,按照 IIFE
限制 $scope.streams[x]
对象的范围。
代码
var getStreamInfo = function(nick) {
return $http.jsonp('https://api.twitch.tv/kraken/channels/' + nick + '?callback=JSON_CALLBACK')
.then(onInfoReceived, onInfoError);
}
for (var x in $scope.streams) {
(function(stream){
getStreamInfo(stream.nick).then(function(data){
stream.channelInfo = data
});
})($scope.streams[x])
};
编辑
还在每个对象中添加 channelInfo
属性,而不是像 @ThomasIllingworth 建议的那样将其添加到每个对象的 nick
属性中。
关于javascript - AngularJS 在 $http 调用后添加到 JSON 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35983292/