Trouble getting a simple Ember Data example working

Ember Data
1

I’m attempting to get a simple example working using Ember Data.

Here is my REST adapter:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
	host: 'http://localhost:3000'
});

After my page loads I click on my Ember tab in Chrome’s developer tools and click on ‘$E’ under controller. I then type ‘$E.store.findAll(‘property’);’ and get the following in the console:

WARNING: Encountered “0” in payload, but no model was found for model name “0” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“0”)) ember.debug.js:5207 WARNING: Encountered “1” in payload, but no model was found for model name “1” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“1”)) ember.debug.js:5207 WARNING: Encountered “2” in payload, but no model was found for model name “2” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“2”)) ember.debug.js:5207 WARNING: Encountered “3” in payload, but no model was found for model name “3” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“3”)) ember.debug.js:5207 WARNING: Encountered “4” in payload, but no model was found for model name “4” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“4”)) ember.debug.js:5207 WARNING: Encountered “5” in payload, but no model was found for model name “5” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“5”)) ember.debug.js:5207 WARNING: Encountered “6” in payload, but no model was found for model name “6” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“6”)) ember.debug.js:5207 WARNING: Encountered “7” in payload, but no model was found for model name “7” (resolved model name using web-content@serializer:application:.modelNameFromPayloadKey(“7”)) Error: Assertion Failed: You must include an ‘id’ for undefined in an object passed to ‘push’ at new Error (native) at Error.EmberError (http://192.168.11.12:4200/assets/vendor.js:25605:21) at Object._emberMetalCore.default.assert (http://192.168.11.12:4200/assets/vendor.js:15745:13) at ember$data$lib$system$store$$Service.extend._pushInternalModel (http://192.168.11.12:4200/assets/vendor.js:72947:15) at ember$data$lib$system$store$$Service.extend.push (http://192.168.11.12:4200/assets/vendor.js:72933:34) at http://192.168.11.12:4200/assets/vendor.js:67921:17 at Object.Backburner.run (http://192.168.11.12:4200/assets/vendor.js:10838:25) at ember$data$lib$system$store$$Service.extend._adapterRun (http://192.168.11.12:4200/assets/vendor.js:73169:33) at http://192.168.11.12:4200/assets/vendor.js:67918:15 at tryCatch (http://192.168.11.12:4200/assets/vendor.js:60951:14)

This is my ‘property’ model:

import DS from 'ember-data';

export default DS.Model.extend({
	_id: DS.attr('number'),
  	name: DS.attr('string')
});
2

Hi, try changing your adapter to the following. Note the primaryKey setting:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
	host: 'http://localhost:3000',
        primaryKey: '_id'
});
3

I get the same error.

This should be returning an array. Is there something I need to do with the array; serializer perhaps?

4

Could you post an example of what your JSON payload looks like?

5

Example of data returned:

[
  {
    "_id": "53dc0aeede4be108724ce8e4",
    "name": "Turnips Way"
  },
  {
    "_id": "53dc0aeede4be108724cec3b",
    "name": "Balters Bandwagon"
  },
  {
    "_id": "55e5fb1967b752ddfd78f60c",
    "name": "Dumpling Drop"
  }
]
6

Aah I see. Your JSON needs to look like this:

{
    "properties": [
      {
        "_id": "53dc0aeede4be108724ce8e4",
        "name": "Turnips Way"
      },
      {
        "_id": "53dc0aeede4be108724cec3b",
        "name": "Balters Bandwagon"
      },
      {
        "_id": "55e5fb1967b752ddfd78f60c",
        "name": "Dumpling Drop"
      }
    ]
}

And you don’t need to list _id field in your model definition. Remove it:

import DS from 'ember-data';

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

Is there a way for me to modify the JSON as it comes back in rather than changing my API?

8

And now you’ve found the biggest issue with Ember and legacy services.

9

This couldn’t be handled with a serializer?

10

This can be handled in a serializer, should be quite straightforward for this particular case. But it’ll get more involved if you need model relationships, etc.

11

So at this point am I better of doing something like…

model: function() {
    return Ember.$.getJSON(...).then(function(data) {
    }
}
12

Depends on your needs I guess. It works well for simple scenarios and beyond. I have built applications without ED and they work just fine. Using ED makes sense when you have plenty of different CRUD forms and relationships between models. The project I’m working on at the moment is a perfect use case for ED and it saved me a ton of precious time :wink:

13

Thanks for the feedback.

14

Yes of course, there is an easy solution! just use the JsonSerializer instead the rest one. Check the API section

15

Square, you definitely need a serializer. It’s easy for your example.

There are several options, you can extend the normalize* functions in a RESTSerializer or even JSONAPISerializer. With JSON API, that array should be normalized to something like:

{
  data: [
    {
      id: "53dc0aeede4be108724ce8e4",
      type: "item",
      attributes: {
        name: "Turnips Way"
      }
    },
    {
      id: "53dc0aeede4be108724cec3b",
      type: "item",
      attributes: {
        name: "Balters Bandwagon"
      }
    },
    {
      id: "55e5fb1967b752ddfd78f60c",
      type: "item",
      attributes: {
        name: "Dumpling Drop"
      }
    }
  ]
}

Where "item" is your actual type.

If you want a full blown explanation, check out my recent post: Fit Any Backend Into Ember with Custom Adapters & Serializers - Ember Igniter

4 Likes