在AngularJS中将json添加到作用域

Question

I am concatenating two objects in json and assigning it to $scope in angularjs. But unable to do the same. The code is given below

//https://wind-bow.hyperdev.space/twitch-api/channels/ESL_SC2

/*Global Variable*/
var responseData=[];
var responseDataValues=[];
var twitch = angular.module("twitch",[]);

twitch.controller("listStremers",streamMe);

function streamMe($scope,$http)
{
  var streamers=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas","comster404","brunofin"];

  for(var i=0;i<streamers.length;i++)
    {
      $http({
        method:"jsonp",
        url:"https://wind-bow.hyperdev.space/twitch-api/streams/"+streamers[i],
        params:{ 
            format: 'json',
            callback: 'fitData'
        }
      });
      $http({
        method:"jsonp",
        url:"https://wind-bow.hyperdev.space/twitch-api/channels/"+streamers[i],
        params:{ 
            format: 'json',
            callback: 'fitDataValues'
        }
      });
    }
 $scope.twitchData=makeJson(responseDataValues,responseData);
  $scope.filStatus={};
  $scope.clear=function(){
    $scope.filStatus={};
    console.log($scope);
  }
}

function fitData(response)
  {

    responseData.push(response);
  }
function fitDataValues(response)
{
  console.log(response);
  responseDataValues.push(response);
}

function makeJson(arr1,arr2)
{

  for(var i=0;i<arr1.length;i++)
    {

      arr1[i].stream=arr2[2].stream;
      if(arr1[i].stream==null&&arr1[i].status==404)
      {
        arr1[i].liveStatus="offline";
      }
      else if(arr1[i].status==404)
      {
        arr1[i].liveStatus="dead";
      }
      else
      {
        arr1[i].liveStatus="online";
      }
      //console.log(arr1[i]);
      //console.log(arr2[i]);
    }
  //console.log(arr1);
  return arr1;
}

in the above code in makeJson function I have to create a new liveStatus,stream property in arr1[i] object and assign value to it but code get execute without any problem however no value get assigned to arr1 and same get assigned to $scope in controller. Am new to AJ and javascript, please help

Answer 1

This problem is because the data you are concatenating, is coming from http call, which is asynchronous,before your data came through http call, the line

 $scope.twitchData=makeJson(responseDataValues,responseData);

got executed with both blank array. You can do it either by promise resole, or with a simple way make following changes in your code :

function fitData(response)
{
    responseData.push(response);
    if(responseDataValues.length){
        $scope.twitchData=makeJson(responseDataValues,responseData);
    }
}
function fitDataValues(response)
{
   console.log(response);
   responseDataValues.push(response);
    if(responseData.length){
        $scope.twitchData=makeJson(responseDataValues,responseData);
    }
}

the http call take the more time will invoke the function call with both array having values.