AngularJS handle stacked promisses - angularjs

Question

I have an array of arrays that I want to run a async. function on.
for(var a in As){
this.doSomething(a).then(function(result){
for(var b in Bs){
this.somthingElse(b).then(function(){console.log(result)});
}
})
}
How can I force this to be processed in synchronously? I found Array.prototype.map and Array.prototype.reduce, but they seem not to be available in AngularJS?

Answer 1

Firstly, while AngularJS does not include a angular.map or angular.reduce, Array.prototype.map and Array.prototype.reduce is largely unrelated to AngularJS.
Any modern browser would support the map and reduce array functions. angular.forEach is for compatibility purposes (for IE8 and earlier). If you want to use map/reduce and supporting IE8 or earlier, try underscore.js or lodash.
Back to your question, there is not enough information on what you want to achieve and what actually the variables As and Bs are.
Let's make the following assumptions:
As and Bs are both proper JavaScript Arrays
For every memeber of As, you want to doSomething with it, wait until it's done, then do somthingElse with every member from Bs, when that's done, log the result of doSomething
This means you'll run somthingElse As.length * Bs.length times.
You do not care which As member has to be done first
This means As members would concurrently be done together
Similarly, for every Bs iteration, you do not care who is done first
Below is the code, you will need Angular's $q service:
// We cannot bring 'this' into map function's scope, so assign it to 'self'
var self = this;
var promises = As.map(function(a){
return self.doSomething(a).then(function(resultOfA){
return $q.all(Bs.map(function(b){
return self.somthingElse(b).then(function(resultOfB){
console.log(resultOfA);
return resultOfB; // Not neccessary
});
}))
});
});
// Now if you want to do something after all those iterations, do it here:
$q.all(promises).then(function(){
// do something after all 'As.length * Bs.length' iterations are done
});
You will see in the console log random sequences of resultOfA, implying they are done asynchronously. If you want get the actual results for use later, you can do this instead:
// We cannot bring 'this' into map function's scope, so assign it to 'self'
var self = this;
var promises = As.map(function(a){
return self.doSomething(a).then(function(resultOfA){
return $q.all(Bs.map(self.somthingElse)).then(function(resultsOfB){
return {
resultOfA: resultOfA,
resultsOfB: resultsOfB
};
});
})
});
// Now if you want to do something after all those iterations, do it here:
$q.all(promises).then(function(resultsOfA){
// do something after all 'As.length * Bs.length' iterations are done
console.log(resultsOfA);
// Output would be something like:
// [{
// resultOfA: 'Result of A[0]',
// resultsOfB: ['Result of B[0]', 'Result of B[1]', 'Result of B[2]...']
// }, {
// resultOfA: 'Result of A[1]',
// resultsOfB: ['Result of B[0]', 'Result of B[1]', 'Result of B[2]...']
// }]
});

Answer 2

you can create an array of promises and then use $q.all() to resolve all promises when they are all completed.
var promises = [];
for(var a in As){
promises.push(this.doSomething(a));
}
$q.all(promises).then(function(result){
for(var b in Bs){
this.somthingElse(b).then(function(){console.log(result)});
}
})

Answer 3

I think you're looking for a way to run everything synchronously - so if you have the following:
var As = ['A1', 'A2', 'A3'];
var Bs = ['B1', 'B2', 'B3'];
You'd want the execution to be 'A1', 'B1', 'B2', 'B3', 'A2', 'B1', ...
Is that correct?
If so, the following could be used:
function start(){
$log.log('start');
As.reduce(function(promise, itemA){
return promise.then(function(){
return doSomething(itemA).then(startBs);
});
}, $q.resolve());
}
function startBs(){
$log.log('start Bs');
return Bs.reduce(function(promise, itemB){
return promise.then(function(){
return somethingElse(itemB);
});
}, $q.resolve());
}
Sample plunker: https://plnkr.co/edit/fgiI3J2ylcW4FUXuXjIP?p=preview

Answer 4

if you are ok using bluebird, you can do something like this:
function doSomething(v){
return new Promise(function(fullfil, reject){
setTimeout(function(){
console.log(v);
fullfil(v);
},500);
});
};
var As = [[1,2],[3,4],[5,6]];
(function start(){
return Promise.map(As, function(a) {
return doSomething(a).then(function(){
return Promise.map(a, function(b) {
return doSomething(b);
});
});
});
})();