Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

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.

share|improve this question
2  
Put the second http.get inside the then of the first one – Joao Leal Jun 16 at 10:41
    
@JoaoLeal yeah, I have proved it, but then $scope.business is undefined when I have to use it outside the $http method for saving it in an object with another data that comes from another process. – Jesus Mur Fontanals Jun 16 at 10:45
    
Are you using ui-router? – Joao Leal Jun 16 at 10:51
    
@JoaoLeal Yes. I'm using ui-router. – Jesus Mur Fontanals Jun 16 at 10:54

2 Answers 2

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

share|improve this answer
    
Thanks, but after that I have to use the data of $scope.business to join it in another object called 'bill' and the result of $scope.business outside the $http.get method is undefined :S – Jesus Mur Fontanals Jun 16 at 10:49
    
I edit my answer. Please, check – avcajaraville Jun 16 at 11:06

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;
}
share|improve this answer
    
Yeah, but he didnt specified that this is only needed on the first load. It might be inside a controller function or somewhere else. – avcajaraville Jun 16 at 11:11
    
True, I think with the information he provided your answer is correct. But just wanted to show an alternative that might as well work for him. – Joao Leal Jun 16 at 11:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.