Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Incorrect JSON format for Ember Data

I'm using the latest version of EmberJS and Ember Data. I have the next JSON data:

[{
    "id": 6,
    "name": "First object",
    "vol": 40,
    "description": "bla bla bla",
    "category": "first"
}, {
    "id": 7,
    "name": "Second object",
    "vol": 17,
    "description": "Some description",
    "category": "second"
}]

And the next model:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  vol: DS.attr('number'),
  description: DS.attr('string'),
  category: DS.attr('string')
});

And I don't understand how to make Ember data works. I have suspicious that ember data expects something like next:

[{ 
    model-name {
        "id": 6,
        "name": "First object",
        "vol": 40,
        "description": "bla bla bla",
        "category": "first"
    }
}, { 
    model-name {
        "id": 7,
        "name": "Second object",
        "vol": 17,
        "description": "Some description",
        "category": "second"
    }
}]

In console I have a bunch of warnings:

WARNING: Encountered "0" in payload, but no model was found for model
name "0" (resolved model name using emdber-drink-
it@serializer:application:.modelNameFromPayloadKey("0"))
WARNING: Encountered "1" in payload, but no model was found for model
name "1" (resolved model name using emdber-drink-
it@serializer:application:.modelNameFromPayloadKey("1"))

And more than hundred similar records (that is how many records server returns on request). And no data in store.

How can I fix this problem without changing JSON that I receive from server?

like image 712
Crabar Avatar asked Jul 30 '15 18:07

Crabar


People also ask

What is the default serializer shipped with Ember?

Ember Data ships with 3 serializers. The JSONAPISerializer is the default serializer and works with JSON:API backends. The JSONSerializer is a simple serializer for working with single JSON object or arrays of records.

How do I use Ember data?

It is the main interface you use to interact with Ember Data. In this case, call the findAll function on the store and provide it with the name of your newly created rental model class. import Route from '@ember/routing/route'; export default Route. extend({ model() { return this.


1 Answers

From http://emberjs.com/api/data/classes/DS.JSONSerializer.html

In Ember Data a Serializer is used to serialize and deserialize records when they are transferred in and out of an external source. This process involves normalizing property names, transforming attribute values and serializing relationships.

At this time there are 4 types of serializers:

  • DS.Serializer
  • DS.JSONSerializer
  • DS.RESTSerializer
  • DS.JSONAPISerializer

The JSON data you have is plain json.

JSONSerializer is useful for simpler or legacy backends that may not support the http://jsonapi.org/ spec

So you need JSONSerializer which is the most simple solution to consume plain json data.
With ember-cli is pretty easy create a new serializer, for example for a model book:

ember generate serializer book

which will produce something like this:

version: 1.13.8
installing serializer
  create app/serializers/book.js
installing serializer-test
  create tests/unit/serializers/book-test.js

The previous command will create a serializer of type RESTSerializer. (If you dont use ember -cli just create this file at hand)

// app/serializers/book.js
import DS from 'ember-data';

export default DS.RESTSerializer.extend({
});

and then change RESTSerializer by JSONSerializer:

import DS from 'ember-data';

export default DS.JSONSerializer.extend({
    primaryKey: '_id', // useful for mongodb-like data
});

I hope you enjoy learning ember as much as I do.

like image 71
Igor Parra Avatar answered Nov 05 '22 23:11

Igor Parra