calling asynchronous recursive function in loop and getting result in angularjs

Question

Due to a weird API, I need to call asynchronous recursive function in loop and getting result in angularJS. Below is example of my situation.

We have task lists, each Task may have none, one or more Sub Tasks Each Sub Tasks may further have none, one or more Sub Tasks I need to get all Tasks and Sub Tasks in a single array of objects The problem is for getting the list of Sub Tasks of a Task, we need to call async API. Due to async in nature of API, I was not able to get all result

 //We have task lists
allTasks = fromSomeOtherFuncion();
$scope.loadSubTask = function () {
        var deferred = $q.defer();
        for (var j = 0; j < allTasks.length; j++) {

            for (var k = 0; k < allTasks[j].subtasks.length; k++) {
                $scope.fetchTaskByTaskID(allTasks[j].subtasks[k].id, deferred);
            }
        }
        return deferred.promise;
    };

    $scope.fetchTaskByTaskID = function (id, deferred) {
        if (!deferred) {
            deferred = $q.defer();
        }
        var client = window.client;
        client.tasks.findById(id, {
            opt_fields: 'id,name,memberships,subtasks',
        }).then(function (response) {

            if (response.subtasks.length > 0) {
                for (var m = 0; m < response.subtasks.length; m++) {
                    $scope.fetchTaskByTaskID(response.subtasks[m].id, deferred);
                }
            }
            else {
                deferred.resolve(response);
                return deferred.promise;
            }
        });
    };

//Then I called the function
 $scope.loadSubTask().then(function (subtasks) {
                        //I need here all Tasks+SubTasks+SubSubTasks..., which I am not getting


                    });

you are not aggregating the tasks as you are getting them. keep pushing them in an array as you loop through the subtasks or as you get them asynchronously and then finally resolve that array. — pranavjindal999
– pranavjindal999, Commented Nov 8, 2017 at 12:43

Ved · Accepted Answer · 2017-11-08 12:40:09Z

1

You need to preserve the value of j and K. You can do this way:

$scope.loadSubTask = function () {
        var deferred = $q.defer();

        for (var j = 0; j < allTasks.length; j++) {
         (function(j){

            for (var k = 0; k < allTasks[j].subtasks.length; k++) {
               (function(k){

                $scope.fetchTaskByTaskID(allTasks[j].subtasks[k].id, deferred);
             })(k)
            }
         })(j)
        }
        return deferred.promise;
    };

You can also use let instead of var. It will be the most cleaner way,

answered Nov 8, 2017 at 12:40

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

1 Comment

Sanjay Gupta Over a year ago

Hi Ved, Thanks for suggestion. But my problem not got solved. For understanding my sitattion, I have created plunkr. I need the callback when all async requests get executed. plnkr.co/edit/6pZ6gHIbdg0tI02PAeIS

Collectives™ on Stack Overflow

calling asynchronous recursive function in loop and getting result in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related