Angular Looping Promises - Function Returns Empty Object

Question

I'm trying to pass a result (array) from a promise to a function that iterates over this result, making a get request for each item and creating a new object with the results before returning it. The problem is that the object is being returned before the promises are resolved and populate it. What is the correct way to return a populated object from multiple promises?

function getPackageDetails(packages) {
  var detailedPackages = {};
  angular.forEach(packages, function(p) {
    vsmsPackageFactory.getPackage(p.id)
    .then(function(response) {
      var subsystem = response.data.packageManifest.subsystem;
      var partNumber = response.data.packageManifest.resultConfig.partNumber;
      var packageName = response.data.packageMetaData.packageName;
      if(detailedPackages[subsystem] === undefined) {
        detailedPackages[subsystem] = {};
      }
      if(detailedPackages[subsystem][partNumber] === undefined) {
        detailedPackages[subsystem][partNumber] = {};
      }
      detailedPackages[subsystem][partNumber][packageName] = response.data;
    });
  });
  return detailedPackages; // returns before all promises resolved
}

vsmsCampaignFactory.getCampaignPackages(queryString)
.then(function(response) {
  vm.packageList = getPackageDetails(response.results);
});

Pankaj Parkar · Accepted Answer · 2017-04-26 19:54:06Z

2

You should consider using $q.all for such cases where you can gather up all the promises in single array of promise and then pass it in $q.all & return resultant promise. It will ensure that you're returning data after all promises are done.

In your code, you're just executing your asynchronous ajax calls without worrying about whether they are completed or not. And right after that you're returning detailedPackages data. But obvious it is gonna be empty.

Code

function getPackageDetails(packages) {
  var detailedPackages = {};
  var promises = []; //promise array
  angular.forEach(packages, function(p) {

    var promise = vsmsPackageFactory.getPackage(p.id)
    .then(function(response) {
      var subsystem = response.data.packageManifest.subsystem;
      var partNumber = response.data.packageManifest.resultConfig.partNumber;
      var packageName = response.data.packageMetaData.packageName;
      if(detailedPackages[subsystem] === undefined) {
        detailedPackages[subsystem] = {};
      }
      if(detailedPackages[subsystem][partNumber] === undefined) {
        detailedPackages[subsystem][partNumber] = {};
      }
      detailedPackages[subsystem][partNumber][packageName] = response.data;
    });
    promises.push(promise);
  });
  return $q.all(promises).then(function(){
    return detailedPackages;  // returned data after all promises are done
  });
}

edited Apr 26, 2017 at 19:54

answered Apr 26, 2017 at 19:44

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

neridaj Over a year ago

Promises are still a bit confusing for me, thanks for the help.

Felipe Valencia · Accepted Answer · 2017-04-26 19:48:39Z

1

this could be achive using promise all, here.

 var promises = [];
 promises.push(new Promise(function (resolve, reject) {
   vsmsPackageFactory.getPackage(p.id)
    .then(function(response) {
     ...
     resolve('If you want to return something')
    });
 });
 //After the loop it's finished you execute your promises
 Promise.all(promises).then(function (values) {
  ... perform more code
 });

answered Apr 26, 2017 at 19:48

Felipe Valencia

1014 bronze badges

1 Comment

neridaj Over a year ago

Thanks for the help with this.

Collectives™ on Stack Overflow

Angular Looping Promises - Function Returns Empty Object

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related