Async Request Into For Loop Angular.js

I have an array and i need to send values of array to webservice through http post request one by one . For the node.js , i'm using 'async' package to do that for ex: async.eachSer

Solution 1:

You can use $q to create a similar requirement by chaining promises together. For example:

var chain = $q.when();
angular.forEach(myArr, function(item){
    chain = chain.then(function(){
        var data = {
            myQuery: item.query
        };
        return$http.post('/myServiceUrl', data).success(function(result){
            console.log(result);
        });
    });
});

// the final chain object will resolve once all the posts have completed.
chain.then(function(){
    console.log('all done!');
});

Essentially you are just running the next promise once the previous one has completed. Emphasis here on the fact that each request will wait until the previous one has completed, as per your question.

Solution 2:

function logResultFromWebService(value)
{
    $http.post("/myServiceUrl", value).success(console.log);
}

angular.forEach(myArray, logResultFromWebService);

Solution 3:

If I understand your question correctly. You want to run a for loop in a synchronized manner such that the next iteration only occurs once the previous iteration is completed. For that, you can use a synchronized loop/callbacks. Especially if the order matters.

var syncLoop = function (iterations, process, exit) {
            var index = 0,
                done = false,
                shouldExit = false;
            var loop = {
                next: function () {
                    if (done) {
                        if (shouldExit && exit) {
                            returnexit(); // Exit if we're done
                        }
                    }
                    // If we're not finishedif (index < iterations) {
                        index++; // Increment our index
                        process(loop); // Run our process, pass in the loop// Otherwise we're done
                    } else {
                        done = true; // Make sure we say we're doneif (exit) exit(); // Call the callback on exit
                    }
                },
                iteration: function () {
                    return index - 1; // Return the loop number we're on
                },
                break: function (end) {
                    done = true; // End the loop
                    shouldExit = end; // Passing end as true means we still call the exit callback
                }
            };
            console.log('running first time');
            loop.next();
            return loop;
        }

For your particular implementation:

syncLoop(myArray.length, function (loop) {
        var index = loop.iteration();
        var data = {
            "myQuery": myArray[index].query
        };
        $http.post("/myServiceUrl", data).success(function (result) {
            console.log(result);
            loop.next();
        });
    }, function () {
        console.log('done');
    });

If you intend on doing something with the data once returned (such as perform calculations) you can do so with this method because you will return the data in a specified order.

I implemented something similar in a statistical calculation web app I built.

EDIT:

To illustrate the problem I had when using $q.when I have set up a fiddle. Hopefully this will help illustrate why I did this the way I did.

https://jsfiddle.net/chrislewispac/6atp3w8o/

Using the following code from Matt's answer:

var chain = $q.when(promise.getResult());
    angular.forEach(myArr, function (item) {
        chain = chain.then(function () {
            $rootScope.status = item;
            console.log(item);
        });
    });

    // the final chain object will resolve once all the posts have completed.
    chain.then(function () {
        console.log('all done!');
    });

And this fiddle is an example of my solution:

https://jsfiddle.net/chrislewispac/Lgwteone/3/

Compare the $q version to my version. View the console and imagine those being delivered to the user interface for user intervention in the process and/or performing statistical operations on the sequential returns.

You will see that it does not sequentially give the numbers 1,2,3,4 etc. either in the console or in the view in Matt's answer. It 'batches' the responses and then returns them. Therefore, if step 3 is not to be run depending on the response in step 2 there is not, at least in the answer provided, a way to break out or explicitly control the synchronous operation here. This presents a significant problem when attempting to perform sequential calculations and/or allow the user to control break points, etc.

Now, I am digging through both the $q libraries and the Q library to see if there is a more elegant solution for this problem. However, my solution does work as requested and is very explicit which allows me to place the function in a service and manipulate for certain use cases at my will because I completely understand what it is doing. For me, that is more important than using a library (at least at this stage in my development as a programmer and I am sure there are lots of other people at the same stage on StackOverflow as well).

Solution 4:

If the order doesn't matter in which they are sent

var items = [/* your array */];
var promises = [];
angular.forEach(items, function(value, key){
    var promise = $http.post("/myServiceUrl", { "myQuery": value.query });
    promises.push(promise);
});
return$q.all(promises);