javascript - angular.forEach loop with $http.get

Question

I want to create an array containing some objects

Firstly, I get a first array from the server containing a list of devices like this

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

Then I create a second array containing some objects that each object represent a device(deviceID) and contains an array of events of this device that I get from the server

I do a loop upon the first array like this :

$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 

I get events data from the server correctly .

But, when I check $scope.myArrayofDevices array I get an the first object with only the deviceID and no event array and the second object with deviceID and events array correctly

like this :

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

How can I solve this issue ?

Note that I try to assign an array to $scope.myObject.events it works perfectly the problem is using a loop with $http

Answer 1

You can use $q.all() to resolve an array of promises and get the final result

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


}]);