Handling AJAX in nested loop (Angularjs)

Question

var    $scope.units = [1,2];
var  $scope.shiftplans = ['plan1','plan2','plan3']

         for(var i=0;i<$scope.units.length;i++){            
          for(var a=0;a<$scope.shiftplans.length;a++)  {
            console.log('i:'+i);
            console.log('a:'+a);
         } 
        }

prints :

i:0
a:0

i:0
a:1

i:0
a:2

i:1
a:0

i:1
a:1

i:1
a:2

but :

var    $scope.units = [1,2];
    var  $scope.shiftplans = ['plan1','plan2','plan3']

  for(var i=0;i<$scope.units.length;i++){            
     for(var a=0;a<$scope.shiftplans.length;a++)  {
       ***$http.get(function(){
               console.log('i:'+i);
               console.log('a:'+a);
       });***

     } 
 }

Console log in above ajax prints values in different values based on ajax response.

how to handle AJAX to complete and later to move to looping ?

What does this mean: _"how to handle AJAX to complete and later to move to looping"_ — JLRishe, Mar 18 '15 at 08:15
yes @JLRishe, thats what want (i.e) i will be passing inputs to that ajax call based on the nested loops data. So for each iteration data will change as per loop. But in my current scenario loops are completed before my ajax response. — Arun Kumar, Mar 18 '15 at 08:18

score 0 · Accepted Answer · answered Mar 18 '15 at 08:28

You need to bound the value of i and a on a IIFE for each ajax call, because ajax calls are async, unlike the for-loop

example:

for(var i=0;i<$scope.units.length;i++){            
 for(var a=0;a<$scope.shiftplans.length;a++)  {
       (function(_i, _a) {
           ***$http.get(function(){
                 console.log('i:'+_i);
                 console.log('a:'+_a);
           });***
       })(i, a);
     } 
 }

score 0 · Answer 2 · edited May 23 '17 at 11:56

As it is Asynchronous call, you can not handle when callback will be received AngularJs: $http Synchronous call

The only way I can think of how you can handle it is that you make an array of objects and map responses to be written to correct key. After all responses would be received it can print out the array. Something like this:

var $scope.units = [1,2];
var $scope.shiftplans = ['plan1','plan2','plan3'];

var sizeOfResponses = $scope.units.length * $scope.shiftplans.length;
var countOfResponses = 0;
var responsesArray = [];

for(var i=0;i<$scope.units.length;i++){            
  for(var a=0;a<$scope.shiftplans.length;a++)  {
    var index = i * $scope.units.length + a;
    responsesArray[index] = {i: null, a: null
    $http.get(function(){
      responsesArray[index].i = +i;
      responsesArray[index].a = +a;
      countOfResponses++;
      if(countOfResponses === sizeOfResponses)console.log(responsesArray);
   });

 }

}

Handling AJAX in nested loop (Angularjs)

2 Answers2