angular promise queue and showing loading data

Question

I am using angular's $q promise like this:

$scope.loadingData = true; // show loading spinner in view 
var thingsToProcess = [....];

for(int i = 0; i < thingsToProcess.length; i++) {
    var itemToProcess = thingsToProcess[i];

    makeServiceCallThatReturnsPromise(itemToProcess)
        .then(function(response) {
                   processAndDisplayResponse(response);
         });
}

$loadingData = false; // hide loading spinner

Since the service call promises get queued, the loading indicator goes away before all the data is returned from the service.

How can I keep the loading flag set till all the promises are served?

score 3 · Accepted Answer · answered Mar 12 '14 at 03:29

you can use $q.all() here,

var promises=[];
for(int i=0; i<thingsToProcess.length; i++) {
    var itemToProcess = thingsToProcess[i];

  promises.push(  makeServiceCallThatReturnsPromise(itemToProcess)
        .then(function(response) {
                 //do some work here ?
         }));



}

$q.all(promises).then(function(){
  processAndDisplayResponse(response);
})

score 2 · Answer 2 · answered Mar 12 '14 at 03:23

2

You can use $q.all() for this.

answered Mar 12 '14 at 03:23

BobS

2,588
1
15
15

Thanks for the quick response (+1) but I am new to angular and the example from the other answer really helped so I'm accepting that answer. – Professor Chaos Mar 12 '14 at 03:51
It is definitely more complete. I would have accepted it, too. – BobS Mar 12 '14 at 14:22

score 0 · Answer 3 · edited May 23 '17 at 12:22

I agree $q.all(arrayOfPromises)then(sucessFunction(),failureFunction()).[catch] will assist with this.

 var successFlag = false;

function prosessPromises()
{
     var arrPromises = [];
     angular.forEach(collection, function(item, index) {
         var aPromise = promiseFunction(item);
         arrPromises.push(aPromise);
     });
     $q.all(arrPromises).then(successFunction, failureFunction);
}

 function successFunction(data) {
     successFlag = true;
 };

 function failureFunction(error) {
     successFlag = false;
 };

A small word of caution, if one promise fails then the failureFunction will be called even though all the other/remaining promises succeeded. $q.all failure called

angular promise queue and showing loading data

3 Answers3