Добавление AngularJS к объекту JSON после вызова $http

У меня есть массив никнеймов твич-стримеров. Теперь я хочу вызвать их 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.


javascript json angularjs angular-promise angularjs-http
person Miha Šušteršič    schedule 14.03.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, вы должны вернуть обещание из метода 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 в каждый объект вместо добавления его внутрь свойства nick каждого объекта, как предложил @ThomasIllingworth.

person Pankaj Parkar    schedule 14.03.2016

arrow_upward
1
arrow_downward

Это не удается, потому что вы пытаетесь получить доступ к атрибуту .channelInfo строки. Вам нужно отредактировать свой массив, чтобы вы создавали объекты, к которым вы затем можете добавить атрибут. Что-то вроде этого:

$scope.streams = [{
    nick: { 
        shortname: 'freecodecamp',
    }
}, {
    nick: { 
        shortname: 'storbeck',
    }
}];
person Thomas Illingworth    schedule 14.03.2016