angularjs: use variables from two http requests

Question

I want to use the variables from two http requests. I tried to use rootScope, but it doesn't work. dlon and dlat are still undefined. Here is the code.

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$rootScope, $http) {
    $http.get("http://api.zippopotam.us/us/68503")
      .then(function (response) {
        $rootScope.lon1 = response.data.places[0].longitude;
        $rootScope.lat1 = response.data.places[0].latitude;
    });
    $http.get("http://api.zippopotam.us/us/68504")
      .then(function (response) {
        $rootScope.lon2 = response.data.places[0].longitude;
        $rootScope.lat2 = response.data.places[0].latitude;
    });
    $scope.dlon = $rootScope.lon1 - $rootScope.lon2;
    $scope.dlat = $rootScope.lat1 - $rootScope.lat2;
});

Thanks.

Your scope.dlon and scope.dlat are initialized before the end of the http.get. — AlainIb
– AlainIb, Commented Dec 26, 2015 at 9:19

datasage · Accepted Answer · 2015-12-26 08:08:07Z

2

You will need to use a promise which will resolve after both http requests are completed. In angular this is done with $q.

answered Dec 26, 2015 at 8:08

datasage

19.7k2 gold badges51 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

denixtry · Accepted Answer · 2015-12-26 08:29:31Z

0

I was curious of how it the promise solution would work

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$rootScope, $http, $q) {
  $q.all([
    $http.get("http://api.zippopotam.us/us/68503"),
    $http.get("http://api.zippopotam.us/us/68504")
  ]).then((a) =>{
    $scope.dlon = a[0].data.places[0].longitude - a[1].data.places[0].longitude;
    $scope.dlat = a[0].data.places[0].latitude - a[1].data.places[0].latitude;
  })
});

http://codepen.io/Anthonyzou/pen/mVrxYy

answered Dec 26, 2015 at 8:29

denixtry

3,1082 gold badges23 silver badges20 bronze badges

2 Comments

Alan Wong Over a year ago

I works good with chrome, but in safari, AngularJS just somehow does not work. I don't know why

denixtry Over a year ago

You probably don't want to use the arrow function syntax, it's new in ES6 and not supported everywhere. Instead of (a) => {..} use function (a){...}

Collectives™ on Stack Overflow

angularjs: use variables from two http requests

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related