Persisting Scope beyond get request in Angular

Question

I have the following code:

  $http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
  }).then(function successCallback(response) {
      $scope.stuffData= response.data.length;
    }, function errorCallback(response) {
    });

console.log("amount is:" +$scope.stuffData);


});

In this instance, my log gives:

amount is:undefined

Some other SO questions suggest running $scope.$apply to make my scope persist. To this I get the following error:

angular.js:13920 Error: [$rootScope:inprog] $digest already in progress

What is the correct way to persist my scope? I.E what is the correct way to assign values of a get request to a scope variable?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Joe Clay, Jan 16 '17 at 15:39

Mistalis · Answer 1 · 2017-01-16T15:41:21.177

0

HTTP calls are asynchronous. Your console.log is probably called before your app retrieved the data. When console.log is called, $scope.stuffData is not yet defined.

Move your console.log to the .then.

$http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
}).then(function successCallback(response) {
      $scope.stuffData = response.data.length;
      console.log("amount is:", $scope.stuffData); // <-- It should work
}, function errorCallback(response) {
});

edited Jan 16 '17 at 15:41

answered Jan 16 '17 at 15:36

Mistalis

17,793
13
73
97

This doesn't solve the problem. I want the result to persist outside of the request. – Matt Boyle Jan 16 '17 at 15:38
**It does**. Since you store it in `$scope`, try to show it in HTML. Eg: `
{{stuffData}}
`. – Mistalis Jan 16 '17 at 15:39
@MattBoyle Could you please check again if is solved your issue? – Mistalis Jan 17 '17 at 14:20

score 0 · Answer 2 · answered Jan 16 '17 at 15:38

0

The HTTP Requests run Asynchronously. In order to handle this concept you have to use promises.

Angular uses callback functions for handling asynchronous HTTP calls.

In your case $scope.stuffData is undefined because the console.log runs before http request gets data in .then() callback function.

This would be solved if you've added the console.log in .then() function.

answered Jan 16 '17 at 15:38

korteee

2,640
2
18
24

This doesn't solve the problem. I want the result to persist outside of the request. I guess once the promise is returned I want that value assigned to the scope? – Matt Boyle Jan 16 '17 at 15:39
Excatly. You need to asign the data from response on your scope. But even this is not enough. Your `console.log` runs **before** the callback function runs.That is why your `$scope.stuffData` is undefined. – korteee Jan 16 '17 at 15:45

score 0 · Answer 3 · answered Jan 16 '17 at 15:38

The console.log() is executed before the data is retrieved (http call is asynchronous), so the value is undefined yet. Try checking the value inside the function, after success:

$http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
  }).then(function successCallback(response) {
      $scope.stuffData= response.data.length;
       console.log("amount is:" +$scope.stuffData);
    }, function errorCallback(response) {
       console.log("Response error"); 
    });
});

score -1 · Answer 4 · answered Jan 16 '17 at 15:38

try with this one please--

$http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
  }).then(function successCallback(response) {
      var obj = JSON.parse(response); 
      $scope.stuffData= obj.data.length;
      $scope.$apply();
      console.log($scope.stuffData);
    }, function errorCallback(response) {
    });




});

Persisting Scope beyond get request in Angular

4 Answers4