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