CODEWITHSUNDEEP
javascriptangularjsarrays
Taha
Taha

Reputation: 1242

angular.forEach loop with $http.get

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

Upvotes: 0

Views: 3798

Answers (4)

Stephane Janicaud
Stephane Janicaud

Reputation: 3627

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


}]);

Upvotes: 3

known-as-bmf
known-as-bmf

Reputation: 1222

First of all: like Carnaru Valentin said, you should create a service to wrap your $http calls.

Secondly, I don't get your $http.get('events') call. You don't pass any parameters to it (deviceID or whatnot).

Does it return a list of all events for every devices ? For a specific device ?

If you just forgot to add a parameter to the query: here is a solution that could work:

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

Upvotes: 1

Carnaru Valentin
Carnaru Valentin

Reputation: 1855

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

Upvotes: 0

Anton Stepanenkov
Anton Stepanenkov

Reputation: 1036

Thing is you reassign $scope.myObject to a new object before callback is fired and assigned events to the old one. So both callback's assign properties to same object. You could just put all of the code in callback.

Upvotes: 0

Related Questions