Chaining multiple $http.get() ng-init angularjs

Question

Im working on a scenario where on page load i have 2 $http.get() request. One $http.get() are independent on another $http.get(). Every thing works fine.But in some situation my 2nd $http.get() request executes before the 1st $http.get() and i'm not able to get the desired output. How can we chain the request? Since i'm new to AngularJS i don't have that much idea.

$scope.onload = function()
{
    var responsePromise1 = $http.get(1st rest call);
    responsePromise1.success(function(data) { 

        console.log(data.platform.record);
        $scope.records=data.platform.record;
    });

    responsePromise1.error(function(data, status, headers, config) {
        alert("ajax failed");
    });

    var responsePromise2 = $http.get(2nd rest call);
    responsePromise2.success(function(data2) {
        console.log(data2.platform.record);
        $scope.records2=data2.platform.record;
    });

    responsePromise2.error(function(data2, status, headers, config) {
        alert("ajax failed");
    });
}
$scope.butto = function(datafrom1st,datafrom2nd)
{
    var responsePromise3 = $http.get(3rd rest call);
    responsePromise3.success(function(data3) { 
        console.log(data3.platform.record);
        $scope.records3=data3.platform.record;
    });

    responsePromise1.error(function(data3, status, headers, config) {
        alert("ajax failed");
    });
}

<body>
  <div ng-init="onload()">
    <div ng-repeat="record in records">
      {{record.id}}
    </div>
    <div ng-repeat="record2 in records2">
      {{record2.name}}
    </div>
    <button type="button" class="btn btn-primary btn-sm ng-cloak"
            style="padding-bottom:25px;font-weight:bold;" 
            ng-init="butto(record.id,record2.name)">
      {{record3.data}}
    </button>
  </div>
</body>

Your responsePromise1 execute before responsePromise2 but they are both asynchronize call, which mean we can not guarantee who will finish first. If you need to chain the request ,your responsePromise2 must be inside the sucess of responsePromise1 — Hereblur
– Hereblur, Commented Dec 26, 2016 at 3:53
If they are independent of each other use a Promise All. In the 'then' callback, it will have both responses. — Hoyen
– Hoyen, Commented Dec 26, 2016 at 4:16
Use controllers instead of ng-init and use services to call APIs. Post your html and routes for a better answer — Asim K T
– Asim K T, Commented Dec 26, 2016 at 4:58
See AngularJS $q Service API Reference - Chaining Promises. Also see SO: Why are angular $http success/error methods deprecated? Removed from v1.6?. — georgeawg
– georgeawg, Commented Dec 26, 2016 at 8:46

Hoyen · Accepted Answer · 2016-12-26 04:53:50Z

1

You can try using Promise.all, if they are independent of each other. But you need to execute the code in a specific order.

var responsePromise1 = $http.get(1st rest call);
var responsePromise2 = $http.get(2nd rest call);
var promises = [responsePromise1,responsePromise2]

// Array of Promises
$q.all(promises)
    .then(function(data){
         var data1 = data[0];
         var data2 = data[1];
         // Put logic here to handle both responses.
         return $http.get(3rd rest call);
     })
     .then(function(data3){
         // Put logic here to handle third response
     });

edited Dec 26, 2016 at 4:53

answered Dec 26, 2016 at 4:27

Hoyen

2,5291 gold badge14 silver badges13 bronze badges

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

8 Comments

dockerrrr Over a year ago

can you explain more about $q.all(promises)

Nikolaj Dam Larsen Over a year ago

$q.all([]) returns a promise that resolves when all promises passed to it, have resolved. So in this case the function in then is called, when both responsePromise1 and responsePromise2 have resolved successfully. If any one of the passed promises fails/is rejected, the $q.all is immediately rejected as well. If responsePromise1 and responsePromise2 are truly independent, I'm not sure this is what you want, since if one fails, the other fails as well.

dockerrrr Over a year ago

bro i have 3 $http.get() . i want the output of 1st two to pass in the 3rd request

Nikolaj Dam Larsen Over a year ago

You should include that in your original question then. It's a bit unclear what you're trying to achieve.

dockerrrr Over a year ago

how can i achieve it bro. im stuck at this place

|

Rai Vu · Accepted Answer · 2016-12-26 03:49:22Z

0

Call 2nd request inside success method of 1st request:

var responsePromise1 = $http.get(1st rest call);
        responsePromise1.success(function(data)
        { 
          console.log(data.platform.record);
          $scope.records=data.platform.record;
var responsePromise2 = $http.get(2nd rest call);
        responsePromise2.success(function(data2)
        {
        console.log(data2.platform.record);
        $scope.records2=data2.platform.record;
        });
        responsePromise2.error(function(data2, status, headers, config)
        {
          alert("ajax 2 failed");
        });
        });
        responsePromise1.error(function(data, status, headers, config)
        {alert("ajax failed");
        });

answered Dec 26, 2016 at 3:49

Rai Vu

1,6251 gold badge23 silver badges35 bronze badges

6 Comments

dockerrrr Over a year ago

bro but im using 2 ng-init.One when for the 1st request and other for the second request

Rai Vu Over a year ago

what's you mean ?

dockerrrr Over a year ago

i'm having 2 different functions.

Rai Vu Over a year ago

I think you should add 2nd init inside success method, in this case this async method, so you need call 2nd when 1st success.

dockerrrr Over a year ago

is there any problem in adding a ng-init function inside success method .Whether it gets executed?

|

Gaurav joshi · Accepted Answer · 2016-12-26 03:58:09Z

0

The $http API is based on the deferred/promise APIs exposed by the $q service.

$http
  .get(1st rest call)
  .then(function(data){
       $scope.records = data.platform.record;
       return $http.get(2nd rest call);
  })
  .then(function(result){
     //result of 2nd rest call
  })
  .catch(function(err){
     // Here catch error
  })

answered Dec 26, 2016 at 3:58

Gaurav joshi

1,7971 gold badge15 silver badges28 bronze badges

Comments

dhana lakshmi · Accepted Answer · 2016-12-26 05:26:44Z

Try doing this

   $scope.onload = function()
    {
    var responsePromise1 = $http.get(1st rest call);
        responsePromise1.success(function(data) { 
    SecondInit()
        console.log(data.platform.record);
            $scope.records=data.platform.record;
        });

        responsePromise1.error(function(data, status, headers, config) {
            alert("ajax failed");
        });


      }
    function SecondInit(){
    var responsePromise2 = $http.get(2nd rest call);
        responsePromise2.success(function(data2) {
            console.log(data2.platform.record);
            $scope.records2=data2.platform.record;
        });

        responsePromise2.error(function(data2, status, headers, config) {
            alert("ajax failed");
        });

Here i am trying to bind the second api call to function named SecondInit() and invoke in it on success of first api call this might help

Nikolaj Dam Larsen · Accepted Answer · 2016-12-26 07:04:18Z

You can achieve this, using $q.all as per Hoyen's suggestion:

$scope.onload = function(){

    var promise1 = $http.get('/request1');
    var promise2 = $http.get('/request2');

    $q.all([ promise1, promise2 ]).then(function(data){
        var response1 = data[0].platform.record;
        var response2 = data[1].platform.record;

        $scope.records = response1.map(function(e, i){
            var id = e.id;
            var name = response2[i].name;
            return {id: id, name: name};
        });
    });
};

Then in your view, do this:

<body>
    <div ng-init="onload()">
        <div ng-repeat="record in records">
            <div>{{record.id}}</div>
            <div>{{record.name}}</div>
            <button type="button" class="btn btn-primary btn-sm ng-cloak" style="padding-bottom:25px;font-weight:bold;" 
                ng-click="butto(record.id,record.name)"></button>
        </div>
    </div>
</body>

This should work, but I would really recommend you find a good up-to-date angular tutorial and read up on best practices. This isn't really the optimal way to solve this kind of problem.

Collectives™ on Stack Overflow

Chaining multiple $http.get() ng-init angularjs

5 Answers 5

8 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related