How to build an object array by chaining http calls in AngularJS?

Question

I want to build an array of objects but for each object I need multiple chained http calls. Eg:

var objects = [];
$http.get(/getDataUrl)
.then(function(data){
   for(i = 0; i < data.length; i++)
   {
       objects[i] = { value1 : data.value }
   }
   for(i = 0; i < objects.length; i++)
   {
       http.get(objects[i].value1)
       .then(function(data){
           objects[i].value2 = data.value;
       }
   }
})

Any ideas how to properly execute this mess?

Your solution is not working ? with the very few info that you provided, I assume that it shall work — aorfevre, Jun 27 '15 at 22:39
I don't have access to current counter value 'i' in the chained call. — user3816378, Jun 27 '15 at 23:01
i think you are getting this situation - always i is pointing to the last index? — akashrajkn, Jun 28 '15 at 04:58

score 2 · Accepted Answer · edited May 23 '17 at 12:22

You will always get 'i' value to be the final index because the renderer will print it when the ajax request gives 200, this will take some time. And in that short time, the for loop would have been executed, therefore you will always get the last index for the value of 'i'

To solve this, you will have to use, closure inside loops

Modify your code like as follows,

var objects = [];
$http.get(/getDataUrl)
.success(function(data){
   for(i = 0; i < data.length; i++)
   {
       objects[i] = { value1 : data.value }
   }
   for(i = 0; i < objects.length; i++)
   {
       (function(index) {
           var currentURL = objects[i].value1;

           $http.get(currentURL)
           .success(function(data) {

               // both currentURL and i value can be accessed here 
               console.log(currentURL);
               console.log(index); // i value  = index

               objects[index].value2 = data.value;
           });
       })(i);
   }
})

Now you have access of index inside the anonymous function. Hope this helps

score 0 · Answer 2 · answered Jun 27 '15 at 22:55

You can try to use success instead of then, as $http isn't a standard promise :

var objects = [];
$http.get('/getDataUrl')
.success(function(data){
   for(i = 0; i < data.length; i++)
   {
       objects[i] = { value1 : data.value }
   }
   for(i = 0; i < objects.length; i++)
   {
       http.get(objects[i].value1)
       .success(function(data2){
           objects[i].value2 = data2.value;
       }
   }
})

score 0 · Answer 3 · answered Jun 27 '15 at 23:02

Try something like that : Only one loop to rules them all ;)

$http.get(/getDataUrl)
.then(function(data){
   for(i = 0; i < data.length; i++)
   {
       objects[i] = { value1 : data.value }


       $http.get(objects[i].value1)
       .then(function(data){
           objects[i].value2 = data.value;
       }
    }

})

How to build an object array by chaining http calls in AngularJS?

3 Answers3