Saving an $http response object as a $scope variable

Question

I asked a related question earlier today on stackoverflow but due to both the complexity of the code (not being able to post it) and my own noviceness I wasn't able to really implement a solution from the answers given.

So my question now is, for a code such as:

$http.get(ArbitraryInput).then(function (response) {$scope.data = response});

(you can substitute "then" with "success" above, I use "then" because success is deprecated according to the updated $http api)

How do I actually save the response object in $scope.data? From what I've been doing so far, $scope.data is "undefined" when I later typed in the code:

console.log($scope.data3);

Thanks!

UPDATE ONE

Apparently if I put console.log($scope.data); inside the console will display what I want for $scope.data. But if it is outside, it will remain "undefined" in the console. In other words:

$http.get(ArbitraryInput).then(function (response) {$scope.data = response; console.log($scope.data);});

will return whatever sort of object response was. in the console, but

$http.get(ArbitraryInput).then(function (response) {$scope.data = response;});
console.log($scope.data);

will return "undefined" in the console.

$http.get($scope.coveragesDEMO).then(function (response) {$scope.data = response.data}); Can you check it out? — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Oct 2, 2015 at 17:34
Thanks for the response. I tried it and it didn't work. console.log(response.data) is undefined, whereas console.log(response) is still defined. console.log($scope.data) is still undefined in all scenarios — LargeCrimsonFish
– LargeCrimsonFish, Commented Oct 2, 2015 at 17:39
The console.log executed outside the then is executed before the assignment in the then callback, that's why it outputs undefined — Michel
– Michel, Commented Oct 2, 2015 at 17:46
The response may log as undefined because it is not set until your GET response is received. However, it will be set when you get the data, and hence available in your controller and view. — show-me-the-code
– show-me-the-code, Commented Oct 2, 2015 at 17:51

William B · Accepted Answer · 2015-10-02 18:01:11Z

6

You need to leverage the fact that $http.get returns a promise, and chain to that promise in any code that needs to access the resolved data:

app.controller('Ctrl', function($scope, mainInfo){
    var request = $http.get(ArbitraryInput).then(function (response) {
        $scope.data = response; 
        return response; // this will be `data` in the next chained .then() functions
    });

    request.then(function (data) {/* access data or $scope.data in here */});


    $scope.someFunction = function () {
        request.then(function (data) {/* access data or $scope.data in here */);
    };
}) ;

answered Oct 2, 2015 at 18:01

William B

1,4198 silver badges10 bronze badges

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

Comments

Caleb Williams · Accepted Answer · 2015-10-02 18:13:26Z

Question has been answered, but want to give an alternate solution in case the data is needed immediately. Instead of calling the $http service directly in your controller/directive, you can resolve that data as a dependency in your route, so the data is immediately availble:

angular.module('myApp')
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/home', {
            templateUrl: '/path/to/template',
            controller: 'myCtrl',
            controllerAs: 'ctrl',
            resolve: {
                myData: ['$http', function($http) {
                    return $http.get('/end/point');
                }
            }
        }
    }]);

Then your controller can look like this:

angular.module('myApp')
    .controller('myCtrl', ['myData', function(myData) {
        var self = this;
        self.data = myData;
    }]);

And in your view:

<pre>{{ctrl.data|json:4}}</pre>

Would display all of your data as JSON without having to call $http in your controller.

Community · Accepted Answer · 2017-05-23 11:45:25Z

3

Try this:

$http.get(ArbitraryInput).then(function (response) {
    $scope.data =     response;
    console.log($scope.data);
});

$http.get is asynchronous. See also this explanation of AJAX

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Oct 2, 2015 at 17:45

Thierry

5,2533 gold badges27 silver badges30 bronze badges

3 Comments

LargeCrimsonFish Over a year ago

Thank you for your response. I tried that and it did provide what I wanted in the console, however I'm still trying to figure out how to set a controller $scope variable to permanently be the response from the object. Any reference to the variable outside of the function seems to return an "undefined".

William B Over a year ago

LargeCrimsonFish, the references outside the function need to WAIT until the $http.get is resolved before accessing the $scope variable.

Caleb Williams Over a year ago

@LargeCrimsonFish, You can watch what is actually happening to your $scope object by running a $scope.$watch method and logging out the data. So $scope.$watch('data', function(newValue, oldValue) { console.log(newValue, oldValue);}); and you will see that the $scope.data value is only updated after the $http call is resolved, but will be bound to your view as soon as it can. If you want to perform some operation on that data, you have to do that after the resolve (inside some other function/service). If you need that data immediately, look at the resolve attribute in your routes.

Ahmed Eid · Accepted Answer · 2015-10-02 17:48:03Z

2

Please note that this is a promise (async request) so if you did something like this

$http.get(ArbitraryInput).then(function (response) {$scope.data = response;});
console.log($scope.data)

it might log nothing ,, as you try to log it before the request is finished so you might need to use something like this

$http.get(ArbitraryInput).then(function (response) {
$scope.data = response;
console.log($scope.data);
});

so you are sure that console.log will be executed after the assignment to $scope.data

answered Oct 2, 2015 at 17:48

Ahmed Eid

1,1838 silver badges9 bronze badges

3 Comments

LargeCrimsonFish Over a year ago

Yeah you're right. I didn't realize it was an asynchronous operation cause I'm still pretty new to this. In that case would it be possible to do something like $http.get().then(dothisfirst).then(dothisafter)

Ahmed Eid Over a year ago

I can't understand ,, what you want to do ?? before and after what ??

William B Over a year ago

LargeCrimsonFish, see my answer for setting the scope variable on resolution and then accessing it from other functions in the controller.

Community · Accepted Answer · 2017-05-23 12:24:21Z

1

Here is a practical answer, courtesy of user Kirill Slatin. Practical use example at the bottom of the answer.

If, like me, you need to use that response object as a scope variable, here's the trick:

This will return "undefined" in the console, and like me, you probably won't be able to use that response data on your page:

$http.get(ArbitraryInput).then(function (response) {$scope.data = response;});
console.log($scope.data);

However, this should work:

    $http.get(ArbitraryInput)
         .then(function (response) {
            $scope.data = response;
            $scope.$apply()
});

$scope.$apply() is what will persist the response object so you can use that data.

-

Why would you need to do this?

I'd been trying to create an "edit" page for my recipes app. I needed to populate my form with the selected recipe's data. After making my GET request, and passing the response data to the $scope.form, I got nothing... $scope.$apply() and Kirill Slatin helped big time. Cheers mate!

Here's the example from my editRecipeController:

  $http.get('api/recipe/' + currentRecipeId).then(
    function (data) {
      $scope.recipe = data.data;
      $scope.form = $scope.recipe;
      $scope.$apply()
    }
);

Hope that helps!

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Nov 14, 2016 at 16:43

Bptstmlgt

1272 silver badges12 bronze badges

2 Comments

photocurio Over a year ago

This is certainly the simplest solution to the problem.

Bptstmlgt Over a year ago

Glad it helped 🙌🏼 My path with Angular has been a pretty bumpy ride... Good luck y'all

Collectives™ on Stack Overflow

Saving an $http response object as a $scope variable

5 Answers 5

Comments

Comments

3 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related