Angular $http service not getting objects from .JSON file

Question

Here is my http service code:

app.controller('StoreController', ['$http', function($http){
    var store = this;
    store.products = [];
    $http.get('/store-products.json').then(function(data){
        store.products = data;
    });
}]);

And here is my JSON code:

[
    {
        "name": "...",
        "price": 20.00,
        "description": "...",
        "canPurchase": false,
        "images": [
            "...jpg",
            "...jpg",
            "...jpg"
        ],
        "reviews": []
    },
    {
        "name": "...",
        "price": 15.95,
        "description": "...",
        "canPurchase": true,
        "images": [],
        "reviews": []
    }
]

When I run the code on localhost server, it does not show my objects. There is also no errors in the console that show so I cannot see where I am going wrong. Can anyone see the issue here?

Pengyy · Accepted Answer · 2017-06-05 02:59:22Z

1

your json data is wrapped at response.data of $http.get.

change to below code will solve the problem(also make sure your json file is at right location).

$http.get('/store-products.json').then(function(res){
    store.products = res.data;
});

Plunker demo.

answered Jun 5, 2017 at 2:59

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

1 Comment

Derm Over a year ago

This worked! Thank you. I'm learning angular at the moment and the way I coded the http service first is the way they advised to code it strangely..

Collectives™ on Stack Overflow

Angular $http service not getting objects from .JSON file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related