Recursive queries with promises in AngularJS

Question

I have a recursive query that needs to potentially make further queries based on the results. I would ideally like to be able to construct a promise chain so that I know when all of the queries are finally complete.

I've been using the example from this question, and I have the following method:

 this.pLoadEdges = function(id,deferred) {
    if (!deferred) {
        deferred = $q.defer();
    }
    $http.post('/Create/GetOutboundEdges', { id: id }).then(function(response) {
        var data = response.data;

        if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                var subID = data[i].EndNode;

                edgeArray.push(data[i]);

                self.pLoadEdges(subID, deferred);
            }
        } else {
            deferred.resolve();
            return deferred.promise;
        }

    });

    deferred.notify();
    return deferred.promise;
}

Which I then start elsewhere using:

 self.pLoadEdges(nodeID).then(function() {
                    var edgedata = edgeArray;
                });

And of course I intend to do some more stuff with the edgeArray.

The problem is that the then() function is trigged whenever any individual path reaches an end, rather than when all the paths are done. One particular pathway might be quite shallow, another might be quite deep, I need to know when all of the pathways have been explored and they're all done.

How do I construct a promise array based on this recursive query, ideally so that I can use $q.all[] to know when they're all done, when the number of promises in the promise array depends on the results of the query?

Answer 1

I'm not 100% positive what the end result of the function should be, but it looks like it should be a flat array of edges based on the example that you provides. If that's correct, then the following should work

this.pLoadEdges = function(id) {
    var edges = [];

    // Return the result of an IIFE so that we can re-use the function
    // in the function body for recursion
    return (function load(id) {
        return $http.post('/Create/GetOutboundEdges', { id: id }).then(function(response) {
            var data = response.data;

            if (data.length > 0) {
                // Use `$q.all` here in order to wait for all of the child
                // nodes to have been traversed. The mapping function will return
                // a promise for each child node.
                return $q.all(data.map(function(node) {
                    edges.push(node);

                    // Recurse
                    return load(node.EndNode);
                });
            }
        });
    }(id)).then(function() {
        // Change the return value of the promise to be the aggregated collection
        // of edges that were generated
        return edges;
    });
};

Usage:

svc.pLoadEdges(someId).then(function(edgeArray) {
// Use edgeArray here
});

Answer 2

You need $q.all function:

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

---

Update 1

Check this demo: JSFiddle

The controller can be like following code (well, you may want to put it in a factory).

It loads a list of users first, then for each user, load the posts of this user. I use JSONPlaceholder to get the fake data.

$q.all accepts an array of promises and combine them into one promise. The message All data is loaded is only displayed after all data is loaded. Please check the console.

angular.module('Joy', [])
    .controller('JoyCtrl', ['$scope', '$q', '$http', function ($scope, $q, $http) {
    function load() {
        return $http.get('http://jsonplaceholder.typicode.com/users')
            .then(function (data) {
            console.log(data.data);
            var users = data.data;
            var userPromises = users.map(function (user) {
                return loadComment(user.id);
            });
            return $q.all(userPromises);
        });
    }

    function loadComment(userId) {
        var deferred = $q.defer();
        $http.get('http://jsonplaceholder.typicode.com/posts?userId=' + userId).then(function (data) {
            console.log(data);
            deferred.resolve(data);
        });
        return deferred.promise;
    }

    load().then(function () {
        console.log('All data is loaded');
    });
}]);

---

Update 2

You need a recursive function, so, check: JSFiddle.

The code is below. I use round to jump out of the recursion because of the fake API. The key is here: $q.all(userPromises).then(function () { deferred.resolve(); });. That tells: Please resolve this defer object after all promises are resolved.

angular.module('Joy', [])
    .controller('JoyCtrl', ['$scope', '$q', '$http', function ($scope, $q, $http) {
    var round = 0;

    function load(userId) {
        return $http.get('http://jsonplaceholder.typicode.com/posts?userId=' + userId)
            .then(function (data) {
            var deferred = $q.defer();
            console.log(data.data);
            var posts = data.data;
            if (round++ > 0 || !posts || posts.length === 0) {
                deferred.resolve();
            } else {
                var userPromises = posts.map(function (post) {
                    return load(post.userId);
                });
                $q.all(userPromises).then(function () {
                    deferred.resolve();
                });
            }
            return deferred.promise;
        });
    }

    load(1).then(function () {
        console.log('All data is loaded');
    });
}]);

Answer 3

You can try building up an array of returned promises and then use the $.when.apply($, <array>) pattern. I've used it before to accomplish a similar thing to what you're describing.

More info on this SO thread.

UPDATE:

You probably also want to read the docs on the apply function, it's pretty neat.