将json添加到AngularJS中的范围

时间:2016-11-13 04:06:56

标签: javascript angularjs json

我在json中连接两个对象并将其分配给angularjs中的$ scope。但无法做同样的事情。代码如下:

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

在makeJson函数的上面代码中我必须在arr1 [i]对象中创建一个新的liveStatus,stream属性并为其赋值但是代码执行没有任何问题但是没有值被赋值给arr1并且同样被赋值给控制器中的$ scope。我是AJ和javascript的新手,请帮忙

1 个答案:

答案 0 :(得分:0)

这个问题是因为您连接的数据来自http调用,这是异步的,在您的数据通过http调用之前,该行

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

用两个空行数组执行。 你可以通过promise resole, 或者用一种简单的方法 在您的代码中进行以下更改:

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

http调用需要更多时间来调用函数调用,两个数组都有值。