current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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?

share|improve this question
    
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 Jan 15 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 Jan 15 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 Jan 15 at 18:56
up vote 1 down vote accepted

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.

share|improve this answer
up vote 1 down vote
  1. 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.

  1. 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.