CODEWITHSUNDEEP
javascriptangularjshttpget
CABascourt
CABascourt

Reputation: 1608

AngularJS multiples http.get

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 !

Upvotes: 0

Views: 165

Answers (2)

RohitAneja
RohitAneja

Reputation: 1011

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..

Upvotes: 0

aaronroberson
aaronroberson

Reputation: 1111

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.

Upvotes: 1

Related Questions