AngularJS multiples http.get

Question

Hi guys im a newbie in AngularJS I have a problem calling multiples http.get. $scope.countries is getting values from cities. What happend? How can calling multiple http.get?

$scope.getInfo = function(){
    $scope.refreshing=true;
    //cities
    $http.get(baseUrl+'cities/GET_INFO/ALL').success(function(data) {            
        $scope.cities = data[0];
        $scope.cities.signal = $scope.getSignal(data[0].status);        
        $scope.refreshing=false;    
        alert('city');
    });      


    //countries
    $http.get(baseUrl+'countries/GET_INFO/ALL').success(function(data) {
        $scope.countries = data[0];            
        $scope.countries.signal = $scope.getSignal(data[0].status);
        $scope.refreshing=false;
        // alert('countries');
    });
}

Also I tried with:

$scope.getInfo2 = function(){
    $scope.refreshing=true;
    alert ('start');

    $scope.urlcities = $http.get(baseUrl+'cities/GET_INFO/ALL');
    $scope.urlcountries = $http.get(baseUrl+'cities/GET_INFO/ALL');

    $q.all([$scope.urlcities, $scope.urlcountries]).then(function(values) {
        alert('finish');             
        $scope.refreshing=false;
    });
}

But this code get an error.. Thanks so much for your help !

If you have control of your data source, I think you need to look at this from a different perspective. There's is no need for multiple http requests when fetching relational data as this could all be returned from one endpoint. — Insyte
– Insyte, Commented Aug 25, 2014 at 23:19

aaronroberson · Accepted Answer · 2014-08-25 23:54:02Z

Carlos,

You may have a race condition with the AJAX calls. Try chaining them together using promises:

$scope.getInfo = function(){
    $scope.refreshing=true;
    //cities
    $http.get(baseUrl+'cities/GET_INFO/ALL').then(function(data) {            
      $scope.cities = data[0];
      $scope.cities.signal = $scope.getSignal(data[0].status);        
      $scope.refreshing=false;    
      alert('city');

      return $http.get(baseUrl+'countries/GET_INFO/ALL');
    }).then(function(data) {
      // countries
      $scope.countries = data[0];            
      $scope.countries.signal = $scope.getSignal(data[0].status);
      $scope.refreshing=false;
      // alert('countries');
    });
};

To learn more, watch the screencast: https://egghead.io/lessons/angularjs-chained-promises

You can also learn more about promises here: https://docs.angularjs.org/api/ng/service/$q

NOTE:

It is a best practice to move your data preparation, business logic and calculations out of the controller and into a service. Consider revising your code to encapsulate your AJAX request (using the $http service) into a service and then inject that service into the controller that is being used to present the data to the view.

RohitAneja · Accepted Answer · 2016-06-17 11:58:51Z

0

You need to make Syncronous calls. And in Angular world it is achieved using $q or promise.

Good article on that http://haroldrv.com/2015/02/understanding-angularjs-q-service-and-promises/

Hope it helps..

answered Jun 17, 2016 at 11:58

RohitAneja

1,01113 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS multiples http.get

2 Answers 2

NOTE:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

NOTE:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest