Using two $http methods and saving data in an object Angular

Question

I'm trying to getting data from one resource within a controller and with the result, I have to do a second http get request.

    $http.get('http://' + ProductionConfig.SERVER + '/api/v1/business-config/').then(function (res) {
        $scope.selected= res.data;
        console.log($scope.selected);
    }, function (err) {
        console.error('No se ha podido conseguir los datos de empresa ' + err);
    });

    $http.get('http://' + ProductionConfig.SERVER + '/api/v1/business/id/' + $scope.selected).then(function (res) {
        $scope.business= res.data;
        console.log($scope.business);
    }, function (err) {
        console.error('No se ha podido conseguir los datos de empresa ' + err);
    });

But when I'm trying to do the second $http.get, $scope.selected is undefined and it retrieves me an error because it has failed with the query . After that, I have to save the result in an object for using it later.

How can I pose this problem? Thanks.

Answer 1

This is a common scenario when dealing with promises.

You dont know when your first request is done, so, to perform a second one, you have put it inside the first one (when the first one is completed). Something like this:

$http.get('http://' + ProductionConfig.SERVER + '/api/v1/business-config/').then(function (res) {
    $scope.selected= res.data;
    console.log(res.data);

    $http.get('http://' + ProductionConfig.SERVER + '/api/v1/business/id/' + res.data).then(function (res) {
        $scope.business= res.data;
        console.log($scope.business);
    }, function (err) {
        console.error('No se ha podido conseguir los datos de empresa ' + err);
    });

}, function (err) {
    console.error('No se ha podido conseguir los datos de empresa ' + err);
});

EDIT : if you need to do something with $scope.business, you have to do it inside the second $http call, again, because angular does not know nothing about when it gonna be resolved. Or you can can create a promise and do something when its resolved. You really need to have a look on how promises works.

I recommend you to have a look to this

Answer 2

With ui-router, you can specify dependencies in the resolve property and this will resolve them before the new state is loaded.

$stateProvider.state('myState', {
      template: .... ,
      controller: .... ,
      ......
      resolve:{
         selected: function($http){
            $http.get('http://' + ProductionConfig.SERVER + '/api/v1/business-config/')
            .then(function (res) {
               console.log(res.data);
               return res.data;
             }, function (err) {
               console.error('No se ha podido conseguir los datos de empresa ' + err);
             });
         },
         business: function($http, selected){
            $http.get('http://' + ProductionConfig.SERVER + '/api/v1/business/id/' + selected)
            .then(function (res) {
                console.log(res.data);
                return res.data;
            }, function (err) {
                console.error('No se ha podido conseguir los datos de empresa ' + err);
           });
         }
       }

Then on your controller you can inject those properties:

angular.module('myModule').controller('MyCtrl', function(selected, business) {
   this.selected = selected;
   this.business = business;
}

or

angular.module('myModule').controller('MyCtrl', function($scope, selected, business) {
   $scope.selected = selected;
   $scope.business = business;
}