Use response from one $http in another $http in Angularjs

Question

First of all I want to use $http in order to receive some data (e.g. students), then I want to make another $http call to get e.g. studentDetails. After that I want to append some part of studentDetails to students JSON. Also I need response from the first call in order to create the url for the second call.

Problem is that I cannot access response of the first http call inside the another. Does anybody know how this can be done?

var getStudents = function(){
   var deferred = $q.defer();
   $http.get("https://some_url")
   .success(function(response){
      deferred.resolve(response);
   }).error(function(errMsg){
      deferred.reject(errMsg);
   });
   return deferred.promise;
}
var appendStudentDetails = function(){
  getStudents().then(function(response){
     var studentsWithDetails = response;
     for(var i=0; i<studentsWithDetails.length; i++){
        $http.get("some_url/"+studentWithDetails[i].user.details+"/")
           .success(function(res){

             //here I want to append the details, 
             //received from the second http call, to each student 
             //of the array received from the first http call 

             //PROBLEM: I cannot access response of the
             //first http call inside the another
           })
     }
  })

You can simply store the earlier http call response in your scope variable and use it in your next call's success callback. — Kamesh
– Kamesh, Commented Jul 25, 2017 at 13:53
@Vivz Inside response I have array of 20 students with some information, but from the second http call I am getting some other information that I would like to append to each of the array's element — VitezKoja
– VitezKoja, Commented Jul 25, 2017 at 14:04
Are you sure that studentsWithDetails is an array. Can you console and check — Vivz
– Vivz, Commented Jul 25, 2017 at 14:05

Nikolaj Dam Larsen · Accepted Answer · 2017-07-25 14:55:09Z

3

You're using the deferred anti-pattern as well as the deprecated success/error-callbacks. You should instead use then, since it returns a promise, and you can chain promises.

Here's an example of how you could do it:

function getStudents(){
    return $http.get('[someurl]');
}
function appendStudentDetails(studentsWithDetails){
    for(var i=0; i<studentsWithDetails.length; i++){
        appendSingleStudentDetails(studentsWithDetails[i]);
    }
}
function appendSingleStudentDetails(singleStudent){
    $http.get("some_url/"+singleStudent.user.details+"/")
        .then(function(res){
            // Append some stuff
            singleStudent.stuff = res.data;
        });
}

// Call it like this:
getStudents()
    .then(function(response){ return response.data; })
    .then(appendStudentDetails);

I decided to structure the appendStudentDetails function a little differently, based on its name, but you could as easily just call getStudents() within the method as you did before.

Beware not to use the i-variable inside your inner then-function, as that would cause you troubles with closure.

Edit: Fixed example to avoid problem with i being under closure.

edited Jul 25, 2017 at 14:55

answered Jul 25, 2017 at 14:08

Nikolaj Dam Larsen

5,7146 gold badges37 silver badges46 bronze badges

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

4 Comments

VitezKoja Over a year ago

Thank you!! I still have a problem in accessing studentsWithDetails[i] inside .then. It is undefined. Do you know why this is happening?

Nikolaj Dam Larsen Over a year ago

I've fixed the above example to avoid using i within the inner then-callback. The reason is that the variable i was referenced under closure, so when the callback was called, the loop would have finished and i would have been the wrong value for every call to the callback. This might fix your problem.

VitezKoja Over a year ago

Thanks a lot! It works now! It is a very nice solution! :)

Nikolaj Dam Larsen Over a year ago

Awesome mate. Glad it helped.

Collectives™ on Stack Overflow

Use response from one $http in another $http in Angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related