call $http in response of another http - angular js

Question

I am new on angular JS. I am tried to implement $http in the response of $http.

My issue is that when i call $http in response of anoter $http. It doesn't show the data on view. The view is rendered before the second $http call. I have used promises but no luck. Here is the code from other answer which i used by changing a little.

angular.module('App', [])

.controller('Ctrl', function($scope, resultsFactory) {
  resultsFactory.all().then(
    function(res){
      $scope.results = res;
    },
    function(err){
      console.error(err);
    }
  );
})

.factory('resultsFactory', function($http, $timeout, $q) { 
  var results = {};  

  function _all(){
    var d = $q.defer();
     $http({
       url: url,
       method: 'POST'
     }).then(function (response) {
        var f = {};
        f.id = response.data.id;
        f.name = response.data.name;
        $http({
           url: url,
           data: "id="+response.data.parent_id,
           method: 'POST'
        }).then(function (response1) {
               f.parentname = response1.name;
               d.resolve(f);
        });
     });
    return d.promise;       
  }

  results.all = _all;
  return results;
});

The id and name is shown properly on view but it is showing nothing for parent name. I have debug it. It is undefined when rendering view. After rendering it is setting their value to parentname. Can any one help me to resolve this issue?

you are using the same variable d!

Daniel A. White
– Daniel A. White

2016-03-10 17:16:31 +00:00
Commented Mar 10, 2016 at 17:16 — Daniel A. White
– Daniel A. White, Commented Mar 10, 2016 at 17:16

Daniel A. White · Accepted Answer · 2016-03-10 17:17:59Z

3

You shouldn't need a deferred for this: just chain the promises:

 return $http({
   url: url,
   method: 'POST'
 }).then(function (response) {
    var data = {};
    data.id = response.data.id;
    data.name = response.data.name;
    return $http({
       url: url,
       data: "id="+response.data.parent_id,
       method: 'POST'
    }).then(function (response1) {
           data.parentname = response1.name;
           return data;
    });
 });

answered Mar 10, 2016 at 17:17

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

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

1 Comment

Abdul Rauf Over a year ago

thanks Daniel, the problem is in view also. I have just checked. I am not rendering the value properly. It fixed my problem

Mathew Berg · Accepted Answer · 2016-03-10 17:16:05Z

You overwrote your d variable...

.factory('resultsFactory', function ($http, $timeout, $q) {
    var results = {};

    function _all() {
        var d = $q.defer();
        $http({
            url : url,
            method : 'POST'
        }).then(function (response) {
            var secondD = {};
            secondD.id = response.data.id;
            secondD.name = response.data.name;
            $http({
                url : url,
                data : "id=" + response.data.parent_id,
                method : 'POST'
            }).then(function (response1) {
                secondD.parentname = response1.name;
                secondD.resolve(d);
            });
        });
        return d.promise;
    }

    results.all = _all;
    return results;
});

Collectives™ on Stack Overflow

call $http in response of another http - angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related