Chaining multiple promises created through for loop

Question

I have been studying promises through this link and I understood the idea of it

var parentID;

$http.get('/api/user/name')
  .then(function(response) {

  parentID = response.data['ID'];
  for (var i = 0; i < response.data['event-types'].length; i++) {
    return $http.get('/api/security/' + response.data['event-types'][i]['key']);
  }

  })
  .then(function(response) {

    // response only returns one result of the many promises from the for loop
    // do something with parentID; 

  });

However, my use case requires to loop through and send create more than 1 promises. I have tried to chain an as example above but only the only one of the promise created from the for loop was executed.

How can I continue chaining all of the promises while continue having access to the variable parentID?

First `.then` handler does not return `promise`.. May be `q.all` will help! — Rayon, Jul 24 '16 at 18:16
Can only have one return execute in a function so basically your loop breaks at first return — charlietfl, Jul 24 '16 at 18:52
Possible duplicate of [angular $q, How to chain multiple promises within and after a for-loop](http://stackoverflow.com/questions/21024411/angular-q-how-to-chain-multiple-promises-within-and-after-a-for-loop) — Abhishek, Jul 25 '16 at 05:41

score 1 · Accepted Answer · answered Jul 25 '16 at 04:43

You should use $q.all because it is integrated with the AngularJS digest cycle.

var parentID;

$http.get('/api/user/name')
  .then(function(response) {

      parentID = response.data['ID'];
      var promiseList = [];
      for (var i = 0; i < response.data['event-types'].length; i++) {
          var iPromise = $http.get('/api/security/' + response.data['event-types'][i]['key']);
          promiseList.push(iPromise);
      };
      return $q.all(promiseList);

  })
  .then(function(responseList) {

       console.log(responseList);

  });

From the Docs:

all(promises);

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

Parameters

An array or hash of promises.

Returns

Returns a single promise that will be resolved with an array/hash of values, each value corresponding to the promise at the same index/key in the promises array/hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.

--AngularJS $q Service API Reference -- $q.all

score 0 · Answer 2 · answered Jul 24 '16 at 18:26

You can utilize Promise.all(), substitute Array.prototype.map() for for loop

  var parentID;

  $http.get('/api/user/name')
  .then(function(response) {    
  parentID = response.data['ID'];
  return Promise.all(response.data['event-types'].map(function(_, i) {
    return $http.get('/api/security/' + response.data['event-types'][i]['key'])
    })) 
  })
  .then(function(response) {

    // response only returns one result of the many promises from the for loop
    // do something with parentID; 

  })
  .catch(function(err) {
    console.log(err);
  });

Chaining multiple promises created through for loop

2 Answers2

all(promises);

Linked