How to assign a $http.get response to a variable AngularJS

Question

There have been many similar questions on stack overflow, but using the tips from this have not helped.

I am learning angular.js and am experimenting with $http.get on an API, but am experiencing issues while assigning the response to a variable.

the below get request is run on load. (this is my app.js file)

    var app = angular.module('store',[]);
    app.controller("StoreController", function($scope,$http){
        var request = $http.get('/test').then(function (response) {
            $scope.data = response;
            return response; 
        });
        request.then(function (data) {
            this.products = $scope.data
        });
    });

The below is the response from the request (I can see this in the console view of the browser, but the data is not being displayed.)

    [
        {
        name: 'Dowayne',
        surname: 'Breedt',
        catchphrase: 'wallawallabingbangamIright?',
        reviews: [
                 {
                 stars: 5,
                 body: 'i love stuff',
                 soldOut: false,
                 },
                 {
                 stars: 4,
                 body: 'meh',
                 soldOut: true,
                 },
                 {
                 stars: 3,
                 body: 'shittake mushrooms',
                 soldOut: false,
                 },
                 ]
       }
    ];

This is all junk data (just for practice) but I can't for the life of me understand why it won't display on the HTML page, if I assign the above snippet directly to this.products, then it works perfectly/

What am I missing?

Thank you.

I edited it and removed the extra .then, and it works the same as before, all that the browser is supposed to display is the body of each review, and it does this, but when I get the information through http.get, it does not work. When I look at the inspect element, I can see the request to /test, and it gets a response with the above response — D_Breedt, Sep 06 '16 at 06:08
Looks like you a wrong use `this` in second `then`. Keyword `this` reference to object `request`. Object `request` is a `promise`, returned by `$http.get`. Try this: `request.then(function (data) { $scope.products = $scope.data; });` And you don't need `then` twice. You can do like this: `var request = $http.get('/test').then(function (response) { $scope.products = response; });` — Stepan Kasyanenko, Sep 06 '16 at 06:14

score 1 · Accepted Answer · edited Sep 06 '16 at 06:32

1

when use Promises as then use .data property to getting data.

var app = angular.module('store',[]);
 app.controller("StoreController", function($scope,$http){
    var request = $http.get('/test').then(function (response) {
        $scope.data = response.data;
        return response.data; 
    });
});

edited Sep 06 '16 at 06:32

Kalu Singh Rao

1,671
1
16
21

answered Sep 06 '16 at 05:38

Sandeep

1,461
13
26

Hi. thanks for the reply, I replaced my request with the above, and then assigned the response to this.products and it still does not assign the object to the variable. – D_Breedt Sep 06 '16 at 05:56
Hi, this ended up working, I realized that instead of manually formatting the Json on the API end, I had to json_encode a normal PHP array. – D_Breedt Nov 09 '16 at 06:06

Ruhul · Answer 2 · 2016-09-06T05:39:35.150

-1

Can you please try below syntax???

$http.get('/test').success( function(response) {
      $scope.products= response.data;

   });

edited Sep 06 '16 at 05:39

answered Sep 06 '16 at 05:34

Ruhul

990
7
15

Hi, thanks I tried this, it still gets the same data as my request, but still does not display the information as it should. Am I not supposed to be formatting my response differently? – D_Breedt Sep 06 '16 at 06:01

How to assign a $http.get response to a variable AngularJS

2 Answers2