Foreach into foreach with $http promise - angularjs

Question

I'm trying to create an object by forEach on the responses of various services .. and I do not get the results I need.
I know I should use internal iterations promises but do not know how yet ..
EDIT:
well .. I need is to do is to fill an object of the data into $ foreach foreach .. http into a iteration promises, sample code:
someservice1.getitem().then(function(){
var dataInfo= {};
angular.foreach(data, function(v, k){
dataInfo[v]=[]
someservice2.getitem2(k.data).then(function(data){
datainfo[v].push(data)
})
})
$scope.dataInfo = datainfo;
})
so not working very well .. I think you can solve by using promises but I could not do it.
I hope your help

Answer 1

The problem is that the final $scope.dataInfo = datainfo; is executing early before the datainfo object gets completed. You need to create a promise from which that operation can chain safely.
finalPromise.then ( function (datainfo) {
$scope.dataInfo = datainfo;
});
You create finalPromise by returning and chaining from previous promises.
var service1Promise =
someservice1.getitem().then(function(data){
var promiseList = [];
angular.foreach(data, function(v,k){
var p = someservice2.getitem2(k.data);
p.then(function(data) {
//return key and data for chaining
return { key: k, data: data };
}) .catch (function (error) {
//throw key and error to chain rejection
throw { key: k, error: error };
});
//push to list
promiseList.push(p);
});
//return $q.all promise for chaining
return $q.all(promiseList);
});
Create finalPromise by chaining from service1Promise
var finalPromise =
service1Promise.then(function(fulfilledList) {
var dataInfoObj = {};
//assemble data info
angular.forEach(fulfilledList, function (fulfilledItem) {
dataInfoObj[fulfilledItem.key] = fulfilledItem.data;
});
//return datainfoObj for chaining
return datainfoObj;
});
Now you can chain from the finalPromise to put the data on $scope
finalPromise.then ( function onFulfulled (datainfo) {
$scope.dataInfo = datainfo;
}).catch (function onRejection (error) {
console.log("finalPromise rejected");
console.log(error.key);
console.log(error.error);
});
Be aware that $q.all is not resilient. If any of the promises are rejected, $q.all will be rejected with the first rejection.
For more information on chaining promises see the AngularJS $q Service API Reference -- chaining promises.

Answer 2

You are using angularjs, so with $q, for array of promises within promises you could make your code into something like this:
// first add $q service to your controller,
someservice1.getitem()
.then(function(data){
var dataInfo= {};
var promises = angular.map(data, function(item, index){
var promises2 = angular.map(item.data, function(iData){
someservice2.getitem2(iData)
})
return $q.all(promises2).then(function(resultArray){
dataInfo[index] = resultArray;
});
});
return $q.all(promises).then(function(){
console.log('all data are retrived...');
$scope.dataInfo = datainfo;
});
});
the same might look more elegant in ES6:
let serviceCall2 = data => someservice2.getitem2(data); // serviceCall2 is just a closure for someservice2.getitem2() call
someservice1.getitem()
.then(data => {
let dataInfo= {},
promises = data.map((item, index) => {
let promises2 = item.data.map(serviceCall2);
return $q.all(promises2).then(resultArray => dataInfo[index] = resultArray);
});
return $q.all(promises)
.then(() => {
console.log('all data are retrived...');
$scope.dataInfo = datainfo;
});
});