AngularJs: $http.get request inside another $http.get request

Question

I'm really new to AngularJS , and actually relatively new to programming altogether. Basically, I want to request the JSON api from Jenkins , for the list of running jobs in 2 different folders. Inside that data, there is a url to each individual job, which I want to get the data for, as well. So, I need to do another $http.get request for each job, passing the url (which is a value inside the data of the first request) as the parameters.

Initially, I had one request inside another, inside a couple loops to iterate between

1. The folders, and in each folder
2. The jobs.

After doing some research, I realized that due to $http requests being async, and for loops being sync, that method was not going to work. So I have a service, which, using $q , collects the promise of the first request, but I don't know how to use the data from the first request as a parameter for the second request. Can someone help, please?

Answer 1

You should use async waterfall https://github.com/caolan/async for async request.

Example:

async.waterfall([
    function(callback) {
        callback(null, 'one', 'two');
    },
    function(arg1, arg2, callback) {
      // arg1 now equals 'one' and arg2 now equals 'two'
        callback(null, 'three');
    },
    function(arg1, callback) {
        // arg1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    // result now equals 'done'
});

Answer 2

If I'm understanding right, this is the same thing I had to learn in the last few months. Basically, this:

requestFunction(...)
    .then(function(response)
        {
            nextRequest(...).then(...);
        }
     );

The catch and finally methods are often implemented for this sort of control flow, which is called promises. It's worth looking into; I personally can't stand AngularJS, but understanding it is important to my day job, and this is pretty fundamental to it.

Answer 3

If I unterstand you need to loop twice. So, in your first loop you call your first request. And in the callback of this request, you can put the code for your second loop.

eg:

for(var i=0; i<cpt1; cpt1++){ 
    request1.then(function(response1){
       for(var j=0; j<cpt2; cpt2++){
          request2.then(function(response2){
          });
       }
    });
}

Answer 4

So assume you have two calls, a and b. They both return a list of Jenkins jobs. You can group these using an array of promises and then using $q.all(promises) to group these responses:

var jenkinsPromises = [];

// You could loop over this part if you have an array of calls for example.
jenkinsPromises.push($http.get{ // call folder one });
jenkinsPromises.push($http.get{ // call folder two });

// Now wait for all calls to finish and iterate over their responses.

$q.all(jenkinsPromises).then(function (jenkinsResponses) {
    // jenkinsResponses is an array with objects
    // each object being a response from Jenkins
}

In the above example, jenkinsResponses , you will find a combined result of the, lets say 'first layer' calls to Jenkins. This array contains response-objects which, as you say, contain the urls you need to make calls to.

Using the same practise as above, you can then group the calls in a promise array . Then we use $q.all() again to group their responses.

$q.all(jenkinsPromises).then(function (jenkinsResponses) {
    var i, j, current, urlPromises = [];

    for (i = 0, j = jenkinsResponses.length; i < j; i++) {
        current = jenkinsResponses[i];

        // Push the call to the urlPromises array.
        // Note that this is a dummy call.

        urlPromises.push($http.get{ current.url] };

    }

    $q.all(urlPromises).then(function (urlResponses) {
        // urlResponses contains a result of all calls to the urls.
    }
}