Foreach loop in AngularJS and $http.get

Question

I have problem with my AngularJS function. Data from first forEach is retrieved with $http.get and in second forEach, $scope.products isn't defined yet. I know that $http.get() is an asynchronous request and this is the point... But how to rewrite this function to work fine ?

$scope.getAll = function () {
    var cookies = $cookies.getAll();
    $scope.products = [];
    var i = 0;
 angular.forEach(cookies, function (v, k) {
     console.log("important1:" +  $scope.products);
        console.log("key: " + k + ", value:  " + v);
         ProductsService.retrieve(k).then(function(response) {
                    $scope.products = $scope.products.concat(response.data);
                        $scope.products[i].quantity = v;
                        i++;
         }, function (error) {
            console.log('error');
         });
  });
    console.log("important2:" +  $scope.products);

    angular.forEach($scope.products, function(value, key) {
        $scope.total = value.quantity*value.price + $scope.total;
        console.log("Quantiy: " + value.quantity);
        console.log("Price: " + value.price);
    });
    console.log($scope.products);
    console.log($scope.total);
};

Put all ProductsService.retrieves in an array of promises and resolve using $q.all([promises]).then(...). — Mikko Viitala
– Mikko Viitala, Commented Sep 8, 2015 at 19:05

VRPF · Accepted Answer · 2015-09-08 19:11:58Z

1

I suggest that you use the $q.all().

More specifically, you would do:

$q.all([p1, p2, p3...]).then(function() {
    // your code to be executed after all the promises have competed.
})

where p1, p2, ... are the promises corresponding to each of your ProductsService.retrieve(k).

answered Sep 8, 2015 at 19:11

VRPF

3,1281 gold badge16 silver badges16 bronze badges

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

Comments

Thomas · Accepted Answer · 2015-09-08 19:08:44Z

0

Build up a list of service calls then call $q.all. Inside the then function you can put your second loop.

var listOfServiceCalls = [];
//Add to list of service calls

$q.all(listOfServiceCalls)
    .then(function () {
        //All calls completed THEN
            angular.forEach($scope.products, function(value, key) {
        $scope.total = value.quantity*value.price + $scope.total;
    });
});

answered Sep 8, 2015 at 19:08

Thomas

1,2071 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Foreach loop in AngularJS and $http.get

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related