angular.forEach循环使用$ http.get

时间:2017-04-14 11:37:26

标签: javascript angularjs arrays

我想创建一个包含一些对象的数组

首先,我从服务器获取第一个包含此类设备列表的数组

 [ 
{accountID : "sysadmin",deviceID : "123"},
{accountID : "sysadmin",deviceID : "3"}
    ...
    ]

然后我创建了第二个数组,其中包含一些对象,每个对象代表一个设备(deviceID),并包含我从服务器获取的此设备的事件数组

我在第一个数组上循环,如下所示:

$scope.myArrayofDevices = [];

angular.forEach(response, function(device){ 

    $scope.myObject={};

    $scope.myObject.device = device.deviceID;

    $http.get('events')
        .success(function (data) {

        $scope.myObject.events = data;        

        });


        $scope.myArrayofDevices.push($scope.myObject);

    });//end for loop 

我正确地从服务器获取事件数据。

但是,当我检查$scope.myArrayofDevices数组时,我得到的第一个对象只有deviceID而没有事件数组,第二个对象有deviceID和events数组正确

像这样:

[
{deviceID : 123, events:},
{deviceID : 3 , events : array[5]}
]

我该如何解决这个问题?

请注意,我尝试将数组分配给$scope.myObject.events它完美地运行,问题是使用带有$ http的循环

4 个答案:

答案 0 :(得分:3)

您可以使用$q.all()来解析一系列承诺并获得最终结果

angular.module('app', []);

angular.module('app').controller('ExampleController', ['$scope', '$q', function($scope, $q) {

    $scope.myArrayofDevices = [];

    $scope.getDeviceObject = function(deviceId) {
        return $http.get('events/' + deviceId).then(function(deviceEvents) {
            return {
                "device": deviceId,
                "events": deviceEvents
            };
        });
    }

    var promises = [];

    angular.forEach(response, function(device) {
        promises.push($scope.getDeviceObject(device.deviceID));
    });

    /*
     * Combines multiple promises into a single promise
     * that will be resolved when all of the input promises are resolved
     */
    $q.all(promises).then(function(devices) {
        $scope.myArrayofDevices = $scope.myArrayofDevices.concat(devices);
    });


}]);    

答案 1 :(得分:1)

首先:像Carnaru Valentin所说,你应该创建一个服务来包裹你的$http电话。

其次,我没有收到你的$http.get('events')电话。你没有传递任何参数(deviceID或诸如此类的东西)。

是否返回每个设备的所有事件列表?对于特定设备?

如果您忘记在查询中添加参数:这是一个可行的解决方案:

var promises = response.map(function (device) {
  return $http.get('events/' + device.deviceID)
    .then(function (data) {
      return {
        device: device.deviceID,
        events: data
      };
    });
})

$q.all(promises)
  .then(function (devices) {
    $scope.myArrayofDevices = $scope.myArrayofDevices.concat(devices);
    // alternatively: $scope.myArrayofDevices = devices;
  });

答案 2 :(得分:0)

在触发回调并将事件分配给旧对象之前,您将$scope.myObject重新分配给新对象。所以两个回调都将属性赋给同一个对象。 您可以将所有代码放入回调中。

答案 3 :(得分:0)

1. Create a service:

    function DataService($http, appEndpoint){
        return {
            getLists: getData
        }

        function getData(){
            return $http.get(appEndpoint + 'lists')
        }
      }

2. Create controller:

function ListsController(DataService){
   var self = this;
   self.data = null;
   DataService.then(function(response){
       self.data = response.data;
   });

   // Here manipulate response -> self.data;
}