AngularJS adding to a JSON object after $http call

Question

I have an array of a nicknames of twitch streamers. Now I want to call their API to retrieve data about the channel, and append it to the original JSON object in order to work with it on the front-end of my solution.

Now when I console.log the results of the $https call I get results as an object logged to the console, but I can't figure out why it doesn't append it to the original streams array and show it in my html.

Any help is appreciated

my html:

<div ng-app="twitchAPI" ng-controller="streamController">
  {{ error }}
  <div>
  {{ streams }}
  </div>
</div>

my app:

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

});

I've also created a codepen of the thing, since this is a freeCodeCamp exercise.

Answer 1

1st thing you should return a promise from getStreamInfo method so that you can implement promise chaining over it. Then follow IIFE to restrict scope of $scope.streams[x] object while dealing with asynchronous call in a loop.

Code

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

Edit

Also add channelInfo property in each object instead of adding it inside nick property of each object as @ThomasIllingworth suggested.

Answer 2

This is failing because you're trying to access the attribute .channelInfo of a string. You need to edit your array so you are creating objects which you can then add the attribute to. Something like this:

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