How to acquire response data from a $http.get request?

Question

I have the following controller.

spaModule.controller("galleryController", function($http, $scope) {
    var test;
    $http.get("resources/php/gallery.php").success(function(response){
        test = response;
    });
    console.log(test);
});

This controller sends a get request to a PHP file which returns some JSON containing the file names of all the images I have in a certain directory. I know I should probably be using a service for this, but I will only be using this information in one controller, so I'd rather just keep it contained in this controller.

I need to get the response data from inside the anonymous function into the scope of the controller so that I can create a gallery directive with the JSON data.

The code that I've added to this question was my attempt at doing this. I think my problem may be that the .success function has it's own scope, or possibly the $http object, so I'm within a "nested" scope. That is I need to get the JSON out of the scope of the anonymous function, into the scope of .success/$http, then from that scope out into the controller's scope. I'm unsure if this is my problem, or if it is how to accomplish this.

How do I get my response JSON to my controller's scope?

deceze · Accepted Answer · 2015-07-31T07:53:57.163

2

Simply assign it to the $scope. Local var variables have never been Angular "scope", inside or outside of callbacks.

$http.get("resources/php/gallery.php").success(function(response){
    $scope.test = response;
});

If you mean that you want to post-process the data, you need to do that inside the success callback. Due to the operation being asynchronous, the console.log part in your example can never have access to this data.

$http.get("resources/php/gallery.php").success(function(response){
    // do whatever you need to do here
    var data = response.map(..);
    // then assign to $scope:
    $scope.data = data;
});

edited Jul 31 '15 at 07:53

answered Jul 31 '15 at 07:45

deceze

510,633
85
743
889

I was just talking about the scope of the JavaScript variable, not the actual $scope object. I have a sub-question though. I had already tried this before, but assumed it not to work. I thought that because I was trying to view to data like this: `console.log($scope.test);`. This returns "undefined" in the console, yet I can call `{{ test }}` on the page without issue. Why is this? – Allenph Jul 31 '15 at 07:56
**Asynchronous execution.** The time when you call `console.log` and the time when `$scope.test` is actually assigned are the other way around than you may think. – deceze Jul 31 '15 at 07:57
Hmm. I was planning to use this data in an ng-repeat directive on an external page. If I understand what you're saying, I'm not going in typical chronological order of commands. That `console.log` gets called before the AJAX request has been fully processed. If that's true, I could be in trouble with my directive, right? – Allenph Jul 31 '15 at 08:06
Nope. Any and all modifications to `$scope` are reflected and picked up on by the view directives. That's one of the fundamental concepts of Angular. You modify `$scope` any time as necessary, the view changes accordingly. – deceze Jul 31 '15 at 08:10
So, what I described DOES happen, just not to directives because Angular's fundamental purpose is to handle the updates to the directives from the $scope object. The reason it's not going through for `console.log` is that it's not part of a directive? – Allenph Jul 31 '15 at 08:15
1

No. The reason your `console.log` doesn't show anything is fundamental Javascript and has nothing to do with Angular. Read the duplicate pointed to at the top of your question to understand that. Having understood that, there's no issue with simply writing code as I show in my answer. You get the data asynchronously, assign it to `$scope` in the `success` callback, and your view directives will pick up on it. – deceze Jul 31 '15 at 08:18

score 0 · Answer 2 · answered Jul 31 '15 at 07:45

0

You could store the reveived data in your scope if appropriate:

spaModule.controller("galleryController", function($http, $scope) {
   $http.get("resources/php/gallery.php").success(function(response){
       $scope.data = response;
   });
});

But this maybe only should be done if the data is not to big in size. Otherwise you should store it somewhere else and, process it and only set values required by the ui on $scope

answered Jul 31 '15 at 07:45

Denis Thomas

1,012
1
8
17

1

Why do I need to worry about data size? – Allenph Jul 31 '15 at 07:54

score 0 · Answer 3 · answered Jul 31 '15 at 07:50

spaModule.controller("galleryController", function($http, $scope) {
    $scope.test;
    $http.get("resources/php/gallery.php")
        .success(function(response){
            $scope.test = response;
        })
        .then(function() {
            // $scope.test is set
        });
    // $scope.test is not set yet due to the async $http.get function
});

Here you set the $scope.test inside the success function. Angular will be noticed that the scope is updated and do the job for you. So you will be able to use $scope.test elsewhere inside your code. Becareful with the async function.

I hope this answer to your question.

score -1 · Answer 4 · answered Jul 31 '15 at 07:58

You forgot to inject the dependencies in your controller

Please change controller code snippet as below

spaModule.controller("galleryController", ['$scope','$http',function($scope,$http) {
var test;
 $http.get("resources/php/gallery.php").success(function(response){
    test = response;
});
console.log(test);

}]);

How to acquire response data from a $http.get request?

4 Answers4