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);
}
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.
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.
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.
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.
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;
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With