Cannot set property 'all' of undefined

203 views Asked by At

I'm having a problem getting a response form an API in my Ember.JS application. I'm using a "dummy" API just to learn Ember with and I didn't feel like creating my own back end (this one specifically).

Whenever I try to navigate to the Posts template I get the following error:

Error while processing route: posts Cannot read property 'all' of undefined TypeError: Cannot read property 'all' of undefined
    at App.PostsRoute.Ember.Route.extend.model (file:///C:/Users/staff-ch/Documents/ember/js/app.js:24:18)
    at EmberObject.default.extend.deserialize (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:22318:19)
    at applyHook (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:45113:32)
    at Object.HandlerInfo.runSharedModelHook (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:43114:22)
    at Object.subclass.getModel (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:43340:21)
    at __exports__.bind (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:44982:19)
    at tryCatch (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:45439:16)
    at invokeCallback (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:45451:17)
    at publish (file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:45422:11)
    at file:///C:/Users/staff-ch/Documents/ember/js/libs/ember-1.12.0.debug.js:26472:7

Here is the relevant code:

App = Ember.Application.create();

App.ApplicationAdapter = DS.RESTAdapter.extend({
    host: 'http://jsonplaceholder.typicode.com/'
})

App.Router.map(function() {
  ...
  this.resource('posts');
});

App.Post = DS.Model.extend({
    userId: DS.attr(),
    title: DS.attr(),
    body: DS.attr()
});

App.PostsRoute = Ember.Route.extend({
    model: function(){
        return DS.store.all('posts');
    }
});

I suspect this might have to do with the format of the JSON being returned but I'm not sure and I'm don't sure how to fix it if that is the case. I obviously can't change the format of the JSON is being returned however I'm aware of DS.RESTSerilaizer but I'm not sure how to use it. A sample of the response:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },...
]
1

There are 1 answers

7
artych On BEST ANSWER

1) Just

App.PostsRoute = Ember.Route.extend({
  model: function(){
    return this.store.all('post');
  }
});

instead return DS.store.all('posts');

DS.Store is injected into routes as store property.

2) Your response must have root posts.