0

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"
  },...
]
kylieCatt
  • 10,672
  • 5
  • 43
  • 51

1 Answers1

0

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.

artych
  • 3,669
  • 1
  • 17
  • 30
  • Changing `return this.store.all('post');` to `return DS.store.all('posts');` results in the same error. I can't change how the JSON is formatted so I would nee to serialize it – kylieCatt Jun 09 '15 at 16:14
  • Your response must have root "posts" – artych Jun 09 '15 at 16:23
  • Do you how I can use `DS.RESTSerializer` to do that? – kylieCatt Jun 09 '15 at 16:32
  • I've created working jsbin with mockjax for you. Look at http://jsbin.com/doneyohawa/edit?html,js,output – artych Jun 09 '15 at 17:08
  • I got that to work now. It seemed like something was wrong with the way I was importing the scripts. Very strange. – kylieCatt Jun 09 '15 at 17:47
  • It explains `Cannot read property 'all' of undefined`. Does it work for you without payload `root`? – artych Jun 09 '15 at 17:54
  • It needed the root. But it didn't work at first, I copied your JSbin into my code and it wouldn't work. I then copied the `` from your JSBin and it started working after that. I got it now thanks for your hewlp. – kylieCatt Jun 09 '15 at 19:58