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

Try to define a new variable myObject inside the forEach callback function. use var myObject = {} instead of $scope.myObject = {} — Titus
– Titus, Commented Apr 14, 2017 at 11:43

Stephane Janicaud · Accepted Answer · 2017-04-14 14:07:13Z

3

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


}]);

edited Apr 14, 2017 at 14:07

answered Apr 14, 2017 at 11:50

Stephane Janicaud

3,7051 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

dfsq Over a year ago

Deferred anti-pattern.

Stephane Janicaud Over a year ago

Answer edited to better match question.@dfsq you're probably right but I don't have a better answer at the moment and I think it's not that bad. I would love to read a better one ! ^^

dfsq Over a year ago

Just remove $deferred, it's not needed.

$scope.getDeviceEvents = function(deviceId) { return $http.get('events/'+deviceId).then(function(response) { return response.data; }) }

Stephane Janicaud Over a year ago

Simplified my code. I kept deferred but the promise now return the full device object because I'm not sure /events api returns the device ID. If this is the case then you're right, deferred can be removed ;)

Stephane Janicaud Over a year ago

Why downvote my answer ? Please provide arguments or a better answer...

|

known-as-bmf · Accepted Answer · 2017-04-14 12:50:53Z

1

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

edited Apr 14, 2017 at 12:50

answered Apr 14, 2017 at 12:43

known-as-bmf

1,2229 silver badges9 bronze badges

2 Comments

Taha Over a year ago

thank you for your help I get data perfectly from the server I put 'events' to simplify the code but my problem that in the final array some properties in objects inside the array are empty

known-as-bmf Over a year ago

You should try my or stej4n's solution ! $q.all will wait for all the promises to resolve and then return all the responses in an array.

Anton Stepanenkov · Accepted Answer · 2017-04-14 11:45:06Z

0

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.

answered Apr 14, 2017 at 11:45

Anton Stepanenkov

1,0368 silver badges15 bronze badges

Comments

Carnaru Valentin · Accepted Answer · 2017-04-14 11:48:06Z

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

answered Apr 14, 2017 at 11:48

Carnaru Valentin

1,92524 silver badges28 bronze badges

Collectives™ on Stack Overflow

angular.forEach loop with $http.get

4 Answers 4

13 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related