How to create a custom Serializer for Ember data

Question

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);
  }

FWIW, this is a very old and outdated version of Ember Data. — Per Lundberg, Apr 14 '15 at 05:48

score 12 · Accepted Answer · answered Jan 13 '13 at 05:05

12

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;
  }
})

answered Jan 13 '13 at 05:05

Yehuda Katz

28,535
12
89
91

Thanks! I've updated my post with additional info. `extractHasMany` is never called, `extractMany` is. My goal is just to make `App.Event.find()` work right now. I managed to make it work by overriding `extractMany` and just modifying the json by hand to make it fit the requirement (`{ events: [ {}, {} ] }`)... – Robin Jan 13 '13 at 06:15
I assume you're calling `this._super` after munging the data? – Yehuda Katz Jan 13 '13 at 06:58
Indeed. I updated my answer. But I wonder if there isn't a better way to do that. It will do for now, and if I realize I have to override too many methods, then I can think about improving it. Thanks. – Robin Jan 13 '13 at 14:24

How to create a custom Serializer for Ember data

1 Answers1

Linked