Bug - AngularJS Service with GET JSON file

Question

I am working on a simple sample AngularJS application that reads data from an external JSON data file. I have tried everything, and I cannot find why the application does not work. Any input would be most appreciated.

'filmCtrl' Control:

angular
    .module('mediaApp')
    .controller('filmCtrl', function(filmList) {
        var vm = this;
        vm.films = filmList.retrieveFilms();
    });

'filmList' Service:

angular
    .module('mediaApp')
    .service('filmList', function($http) {

        var vm = this;

        vm.retrieveFilms = function() {
            return $http
                .get('films.json')
                .then(function(response) {
                    return response.films;
                });
        };

        return vm;
    });

JSON:

{
    "films":[
        {
            "title": "Reservoir Dogs",
            "director": "Quentin Tarantino",
            "year": "1992"
        },
        {
            "title": "2001: A Space Odyssey",
            "director": "Stanley Kubrick",
            "year": "1967"
        },
        {
            "title": "Memento",
            "director": "Christopher Nolan",
            "year": "2000"
        },
        {
            "title": "Enter the Dragon",
            "director": "Robert Clouse",
            "year": "1973"
        },

         [etc]...
    ]
}

All of these files are saved in the same folder, and have been included in my HTML file. The JSON has been validated. Where have I gone wrong?

use promise and it will solve your problem, or you can return $http.get('films.json') from service and then consume it in your controller — swapnesh
– swapnesh, Commented Jan 15, 2016 at 17:29
Just to be clear, "films.json" is an endpoint on the server correct? Looks a bit like a local file which wouldn't work at all. — mccainz
– mccainz, Commented Jan 15, 2016 at 17:37
You always can inspect what is the object received. Just add a console.log(response); or debugger; statement in the promise then() — jherax
– jherax, Commented Jan 15, 2016 at 18:56

swapnesh · Accepted Answer · 2016-01-16 09:44:50Z

1

As per my comments you can create service like this -

mediaApp.service('filmList', ['$http',
function($http) {
    var vm = this;
    vm.retrieveFilms = function() {
        return $http.get('data.json');
    };
    return vm;
}]);

In controller you can consume this service like -

mediaApp.controller('filmCtrl', function(filmList) {
    var vm = this;
    filmList.retrieveFilms().then(function(response) {
        vm.films =response.data.films;
    });
});

Working Plnkr - http://plnkr.co/edit/6RVlvdh8oG5WaiEHaPdM?p=preview

It will work in FF but for some browsers it will throw CORS error so better run it on a server.

edited Jan 16, 2016 at 9:44

answered Jan 15, 2016 at 17:58

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

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

Comments

deonclem · Accepted Answer · 2016-01-15 17:40:10Z

In a then(response) the response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.

headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate the request.

statusText – {string} – HTTP status text of the response.

So this should be

return $http
   .get('films.json')
   .then(function(response) {
      return response.data.films;
});

instead of

return $http
   .get('films.json')
   .then(function(response) {
      return response.films;
});

See the official doc for more info.

If you're not running a webserver of any kind and just testing with file://films.json, then you're probably running into same-origin policy issues. See:

http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy

Some error message could be useful.

Collectives™ on Stack Overflow

Bug - AngularJS Service with GET JSON file

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related