AngularJS Chaining $http calls

Question

I am still quite new to AngularJS and struggling to figure the following out.

I have quite a few web-services that I need to use, quite a few of them relies on the data from another to successfully make the next call.

For example, the first web-service will retrieve a list of Profiles.

ip.controller("ProfilesCtrl", function($scope, $http) {

  $http.post("Profile_List.asp").success(function(data) {
    $scope.profiles = data;
  }).error(function() {
    alert("An unexpoected error ocurred while loading profiles!");
  });

});

Profiles returns a JSON object. Data returned:

{
  "Success": true,
  "ErrorMessage": "",
  "Objects": [{
    "GUID": "208FF69D-A4EB-4760-B2ED-414C900F4AAC",
    "Name": "John Doe",
    "Status": false
  }, {
    "GUID": "BC5C53FD-5CA7-4DBE-8594-D26AD88B758B",
    "Name": "Jane Doe",
    "Status": true
  }, {
    "GUID": "2FCD677B-DA36-4014-823A-9BDD1A72AD66",
    "Name": "Anonymous",
    "Status": true
  }]
}

Ok, so after I have made the initial call, I need to send the GUID of each Profile Object to another web-service. This service will use the GUID to determine the ID of that specific Profile.

The data from the second web-service will only return the ID for the GUID of the first call.

How can I chain these $http calls? Would it be better to create a new json object and use data from there?

I have done this before using ajax.

*Another question regarding my controller code, is this fine like this or would it be better to maybe do the $http calls as a Service, Provider or Factory? How can I go about doing this?

Any help/links with getting the above to AngularJS code would be appreciated.

Please ask if anything is unclear.

Timothy Groote · Accepted Answer · 2014-12-17 10:17:53Z

2

Simply call execute the next call in your "success" handler.

$http.post("Profile_List.asp").success(function(data) {
    $scope.profiles = data;
    //first call succeeded, and we have the data. call method 2
    executeStep2($scope.profiles);

  })


function executeStep2(profiles)
{
   $http.post("second_method") // etc. (you can just send profiles as post data here)
}

edited Dec 17, 2014 at 10:17

answered Dec 17, 2014 at 10:10

Timothy Groote

8,69229 silver badges53 bronze badges

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

1 Comment

demaniak Over a year ago

Just a comment: it is best practice to declare the function before it is used (executeStep2 in this case)

Collectives™ on Stack Overflow

AngularJS Chaining $http calls

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