Ember Data findAll() causing "TypeError: Cannot read property 'type' of undefined"

0
votes

Hooking up my 1st model to my backend and am getting the following error when calling Ember Data's findAll()

TypeError: Cannot read property 'type' of undefined

The route,

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        this.store.findAll('restaurant');
    }
});

The model,

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr()
});

I can see that Ember is hitting my local server and returning properly formatted JSON from the correct url,

{  
    "restaurants": {  
        "id":1,
        "name":"Restaurant Name"
    }
}

I have seen similar questions about this but it usually has to do with improperly formatted JSON.

2
ember.jsember-data
JSON is formatted properly but maybe serializer expects an array of restauranst: {"restaurants: [{}]} on findAll - bgs
I have tried this and it still does not work. Also the documentation says you can have a singular object, emberjs.com/api/data/classes/… - David B
By default you use the JSONAPIAdapter and serializer. If you want this Json you should manually choose to use the right adapter and serializer - Lux
I am attempting to format my JSON exactly how Ember anticipates by default. Are you saying i'm not? Could you please expact Lux - David B

2 Answers

2
votes

The default data format Ember data used is JSON API so your data should look something like below,

{
  "data": {
    "id": "1",
    "type": "restaurants,
    "attributes": {
      "name": "Name"
    }
  }
}

To make Ember data fit your needs without change how backend produce data's format. You can add your own adapter which is used to transfer your Ember data's request to the right request.

Read more about the adapter at the link below,

https://guides.emberjs.com/v2.6.0/models/customizing-adapters/

1
votes

Your JSON file is formatted like a REST API response, but by default Ember uses JSONAPIAdapter.

First fix the JSON, it should return an array:

[{  
  "id":1,
  "name":"Restaurant Name"
}]

Then change the adapter and configure serializer: 

// in app/adapters/application.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
})


// in app/serializers/application.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.JSONSerializer.extend({
})

Read more:

Customizing adapters

JSONAPIAdapter

RESTAdapter