Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a custom Serializer for Ember data

I have an API that returns JSON that is not properly formatted for Ember's consumption. Instead of this (what ember is expecting):

{ events: [
    { id: 1, title: "Event 1", description: "Learn Ember" },
    { id: 2, title: "Event 2", description: "Learn Ember 2" }
]}

I get:

{ events: [
    { event: { id: 1, "Event 1", description: "Learn Ember" }},
    { event: { id: 2, "Event 2", description: "Learn Ember 2" }}
]}

So if I understood correctly, I need to create a custom Serializer to modify the JSON.

var store = DS.Store.create({
    adapter: DS.RESTAdapter.create({
        serializer: DS.Serializer.create({
            // which hook should I override??
        })
    })
});

I've read the code comment related to the DS.Serializer, but I can't understand how to achieve what I want...

How can I do it?

ps: My goal is to make App.Event.find() work. Currently, I get Uncaught Error: assertion failed: Your server returned a hash with the key 0 but you have no mapping for it. That's why I need to fix the JSON received.

edit: Here's how I made it work, for now:

extractMany: function(loader, json, type, records) {
    var root = this.rootForType(type),
    roots = this.pluralize(root);

    json = reformatJSON(root, roots, json);
    this._super(loader, json, type, records);
  }
like image 718
Robin Avatar asked Jan 13 '13 04:01

Robin


People also ask

What is serializer in Ember?

In Ember Data, serializers format the data sent to and received from the backend store. By default, Ember Data serializes data using the JSON:API format. If your backend uses a different format, Ember Data allows you to customize the serializer or use a different serializer entirely.

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.

What is a serializer in backend?

A serializer is an object responsible for transforming a Model or Collection that's returned from your route handlers into a JSON payload that's formatted the way your frontend app expects. For example, this route handler returns a Movie model: this. get("movies/:id", (schema, request) => { return schema.

What is a model in Ember?

In Ember Data, models are objects that represent the underlying data that your application presents to the user. Note that Ember Data models are a different concept than the model method on Routes, although they share the same name.


1 Answers

I am assuming that the responses contain the IDs only, and that you are trying to extract them.

You will want to subclass DS.JSONSerializer, which supplies the basic behavior for dealing with JSON payloads. In particular, you will want to override the extractHasMany hook:

// elsewhere in your file
function singularize(key) {
  // remove the trailing `s`. You might want to store a hash of
  // plural->singular if you deal with names that don't follow
  // this pattern
  return key.substr(0, key.length - 1);
}

DS.JSONSerializer.extend({
  extractHasMany: function(type, hash, key) {
    return hash[key][singularize(key)].id;
  }
})
like image 143
Yehuda Katz Avatar answered Nov 03 '22 01:11

Yehuda Katz