How to handle asynchronous calls inside looping?

Question

I know this question is already answered in someway, but am unable to get my stuff working.

  YammerFunctionality.getMessagesInThread(msg.id,$scope.older_ID).then(function(response){
            var obj=response.data.messages;
            var messages=[];
            var reverseMessage=obj.reverse();
            var promises=[];
            for(var i=0;i<reverseMessage.length;i++){
                 var deferred = $q.defer();
                 promises.push(deferred.promise);
                if(reverseMessage[i].replied_to_id) {
                    YammerFunctionality.getUserInfo(reverseMessage[i].sender_id).then(function(response){
                        reverseMessage[i].sender_name=response.data.full_name;
                        messages.push(reverseMessage[i]);
                        deferred.resolve();
                    },function(error){
                        deferred.reject(error);
                    });
                }
            }
            $q.all(promises).then(function () {
                 console.info('All resolved');
                 $state.go('yammermessage',{messages:messages});
            },function(){
                showAlert("Thread error");
            });

    },function(error){
        showAlert("Yammer Error while opening Thread.");
    });

I am trying to get all messages from particular thread and once found I am trying to get user details of same. Problem is in for loop where I get the thread and call user service , by the time user service is executed index moves till last count and hence my code gets broken.

reverseMessage[i].sender_name

says " reverseMessage[i]" is undefined since i has moved to last position in array. [If length 20, then i=20 and no data available] Help is appreciated !

You are right when you say _"this question is already answered in someway"_, take a look at [**here**](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript), and [**here**](http://stackoverflow.com/questions/11488014/asynchronous-process-inside-a-javascript-for-loop). — Rohit416, Jun 23 '16 at 12:20
I am talking about Angular promise. Using direct callback is not recommended approach — Anand, Jun 23 '16 at 12:23
That's your pick, Angular is JavaScript behind the scenes so anything that you can think in JS will work. My suggestion is to use a closure. — Rohit416, Jun 23 '16 at 12:26

score 0 · Answer 1 · answered Jun 23 '16 at 12:23

You cannot use the variable i inside your promise. you need to create a closure function and pass the variable to that function. Try the below code.

 for(var i=0;i<reverseMessage.length;i++){
             var deferred = $q.defer();
             promises.push(deferred.promise);
         function closure(i){    
            if(reverseMessage[i].replied_to_id) {
                YammerFunctionality.getUserInfo(reverseMessage[i].sender_id).then(function(response){
                   reverseMessage[i].sender_name=response.data.full_name;
                    messages.push(reverseMessage[i]);
                    deferred.resolve();
                },function(error){
                    deferred.reject(error);
                    });
                }
            }
 closure(i);
        }

Thanks it is better now .. but since loop executes again and again thus making requests by requests, as per Yammer API this is not allowed and hence throws an error "Too many multiple requests".Is there any way to stop the execution of loop until inner service is completed ? — Anand, Jun 23 '16 at 12:38

How to handle asynchronous calls inside looping?

1 Answers1