AngularJs : Multiple Calls for $http service

Question

this is my code :

        var updateScreen = function() {
          $http.get("http://localhost:5000").then(function(response){
          $scope.numSerie = response.data.refDetail.Num_Serie;

          $http.get("data/tempsgammes.json").then(function(res){
            $scope.time = res.data[$scope.numSerie].temps;
            console.log($scope.time)
          })

         console.log($scope.time)
       }

The first $http.get("http://localhost:5000") returns a list of details that I use in the rest of the code, what interests us is the variable numSerie.

Depending on the value of numSerie, another $http.get("data/tempsgammes.json") will be executed to extract the time for this numSerie from a JSON file.

The problem is I cannot get access to the $scope.time only in the second call for $http. The first console.log() gave me the desired result, but the second one undefined.

Can anyone help me ?

zameb · Accepted Answer · 2017-08-24 13:05:31Z

2

Edit: The console.log($scope.time) is being called 2 times. You see the first one is giving the right value and the second one isn't. It is because of the async behaviour of "then". It is not intuitive but the second console.log($scope.time) is being called before the "then" has finished, this is why it shows "undefined".

Edit 2: Try the following to probe the execution order on async operations

 $http.get("data/tempsgammes.json").then(function(response){
   alert('first');       // <--- This will be called first
   .then(function(res){  
      alert('third!');   // <--- This will be called third
 });
 alert('second!');       // <--- This will be called second

Yes, you can use $scope.time anywhere, but if you try to use it bellow of the "then", it will not be defined yet. You can put somewhere in your view {{$scope.time}} and probe that it will be defined outside of the $http.get

If you get undefined is probable that the index of res.data[$scope.numSerie] is out of bounds.

First check if you have some error using the developer tools of your browser. $scope.numSerie seems to be the culprit here, check its value or provide more detail

edited Aug 24, 2017 at 13:05

answered Aug 20, 2017 at 23:36

zameb

86019 silver badges34 bronze badges

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

9 Comments

Anes El Gongi Over a year ago

everything is fine and the res.data[$scope.numSerie] isn't out of bounds, $scope.numSerie it's not a culprit too, $scope.numSerie have the desired value. The only problem is I can't use the $scope.time out from $http.get()

zameb Over a year ago

Oh, I see. In the momment you call console.log($scope.Time), the async call is still in progress. Put console.log($scope.Time) in the inner http$.get() and you should see the value.

Anes El Gongi Over a year ago

I know that i see the value in the inner, I want to use it outside

zameb Over a year ago

To clarify a little (now I see you have the call inside and outside), surely only the "inside" one is working. This is the expected behaviour on async calls. When you call http$.get, the code bellow continues without waiting for the get result (then). So it is normal that $scope.Time is undefined outside (in that instant)

Anes El Gongi Over a year ago

So, what should I do ? I need the value to work with after, I mean outside

|

Collectives™ on Stack Overflow

AngularJs : Multiple Calls for $http service

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related