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?

Answer 1

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;
    });
 });

Answer 2

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;
});