angular.forEach Resolving Nested Promises

Question

I have to make sequential AJAX calls after retrieving a collection of data. I am having issues resolving the nested promises.

Basically, I need to extend each object returned in my first collection with a property of ActionItems and set it's value with a promise then resolve each promise in the collection.

Any help would be greatly appreciated.

Factory

$http.get(urlBase + 'Project?$expand=Plant,CreatedBy,ModifiedBy,Plant/Contacts').then(function(success){
        var contents = {};
        contents = success.data.d.results;

        return contents;
    })
    .then(function(contents){ 
        var contentPromises = [];
        angular.forEach(contents, function(content) {
            contentPromises.push(
                $http.get(urlBase + "ActionItems?$filter=ProjectId eq " + content.Id ).then(function(success){
                    content['ActionItems'] = success.data.d.results;                         
                })
            );
        });
        return $q.all(contentPromises).then(function() {
            return contents;
        });
    });

Current Output is undefined

And what isn't working with your code?

devqon
– devqon

2015-01-06 14:58:23 +00:00
Commented Jan 6, 2015 at 14:58 — devqon
– devqon, Commented Jan 6, 2015 at 14:58
It returns undefined

ExceptionLimeCat
– ExceptionLimeCat

2015-01-06 15:00:06 +00:00
Commented Jan 6, 2015 at 15:00 — ExceptionLimeCat
– ExceptionLimeCat, Commented Jan 6, 2015 at 15:00

ExceptionLimeCat · Accepted Answer · 2015-01-06 15:11:07Z

3

Well turns out this method works, but the key to getting your data back is returning it...

//Forgot the return below...
return $http.get(urlBase + 'Project?$expand=Plant,CreatedBy,ModifiedBy,Plant/Contacts').then(function(success){
    var contents = {};
    contents = success.data.d.results;

    return contents;
})
.then(function(contents){ 
    var contentPromises = [];
    angular.forEach(contents, function(content) {
        contentPromises.push(
            $http.get(urlBase + "ActionItems?$filter=ProjectId eq " + content.Id ).then(function(success){
                content['ActionItems'] = success.data.d.results;                         
            })
        );
    });
    return $q.all(contentPromises).then(function() {
        return contents;
    });
});

Thanks for all who helped.

answered Jan 6, 2015 at 15:11

ExceptionLimeCat

6,4407 gold badges48 silver badges77 bronze badges

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

1 Comment

Benjamin Gruenbaum Over a year ago

Consider using .map on contents.

Sergiu Paraschiv · Accepted Answer · 2015-01-06 15:00:35Z

Your issue lies within the $http.get(...).then() part.

The documentation for .then is telling us that "This method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback". So the promise returned by .then is different than the one returned by $http.get. And you are responsible of resolving or rejecting it (by returning)! The promise returned by .then is the one pushed to contentPromises.

Thus you need something like this:

angular.forEach(contents, function(content) {
    contentPromises.push(
        $http.get(urlBase + "ActionItems?$filter=ProjectId eq " + content.Id ).then(function(success){
            content['ActionItems'] = success.data.d.results;
            return success;                         
        })
    );
});

You'd do well to implement the errorCallback too.

Collectives™ on Stack Overflow

angular.forEach Resolving Nested Promises

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related