AngularJS 在 $http 调用后添加到 JSON 对象

Question

我有一组抽搐主播的昵称。现在我想调用他们的 API 来检索有关频道的数据，并将其附加到原始 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 练习。

Answer 1

第一件事你应该return一个来自getStreamInfo方法的承诺，这样你就可以在它上面实现承诺链。然后按照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 属性中。

Answer 2

这是失败的，因为您正在尝试访问字符串的属性 .channelInfo。您需要编辑数组，以便创建对象，然后可以向其添加属性。像这样：

$scope.streams = [{
    nick: { 
        shortname: 'freecodecamp',
    }
}, {
    nick: { 
        shortname: 'storbeck',
    }
}];

AngularJS 在 $http 调用后添加到 JSON 对象

AngularJS adding to a JSON object after $http call

javascript

json

angularjs

angularjs-http

angular-promise