CODEWITHSUNDEEP
javascriptjsonserializationember.jsember-data
Chris
Chris

Reputation: 1074

Formatting JSON using the RESTSerializer in the latest Ember Data version

I'm struggling to 'munge' my JSON into the correct format.

To illustrate i've made a quick, JSfiddle.

http://jsfiddle.net/chrismasters/NQKvy/638/

The format the server returns the data has a couple of differences to the preferred format recommended by Ember Data now.

Here is the raw JSON output

{
    "video": {
        "uuid": "8a660002-03c6-4b8e-bd8b-4ce28fa0dacd",
        "state": "pending",
        "theme": "basic",
        "resolution": "nHD",
        "title": "Test title",
        "track": {
            "uuid": "376fc3bb-d703-49e7-9d92-bce7f6bf8b56",
            "state": "complete",
            "source": "upload"
        }
    }
}

The first is that rather than use IDs it uses a UUID that is a string.

I seem to have managed to fix that using the normalizeHash, for video at least - but i'm not sure whether the same approach will fix the track model too - especially if I use embedding as I need to.

This is where the big problems start to appear, if I comment out the belongsTo relationship from the video model then it works OK, so I think... it is clearly a problem with the JSON formatting for the embedded track data.

Here are the model definitions and the serialization

App.Video = DS.Model.extend({
  title: DS.attr('string'),
  //track: DS.belongsTo('track', { embedded: true })
});

App.VideoSerializer = DS.RESTSerializer.extend({
    normalizeHash: {
        video: function(hash) {
            hash.id = hash.uuid;
            delete hash.uuid;
            return hash;
        }
    }
});

I'd really appreciate some advice on how to format this response into a format that Ember Data recognises.

Also - does anyone know of a tool or good way of debugging these serialization transformations because at the moment the error message from Ember is not very helpful in terms of debugging or seeing what the serialization output is.

Many thanks for any help you can suggest.

Chris

Upvotes: 2

Views: 3943

Answers (1)

Chris
Chris

Reputation: 1074

In case anyone else has the same confusion over serializations I thought i'd include an explanation how to solve this problem.

Here is the working jsbin:

http://jsbin.com/fuzu/4

The main points are:

Primary Keys

primaryKey: 'uuid'

Is useful to convert the id into the correct naming & needs to be applied explicitly to any serializers (using globally on a ApplicationSerializer didn't seem to work).

Model Relationships

track: DS.belongsTo('track', {embedded: true} )

Ensure the definition of the relationship includes embedding & only on one side.

Extract Single

extractSingle: function(store, type, payload, id, requestType) {
    var tracks = [];
    var track = payload.video.track;
    var video = payload.video;

    tracks.push(track);

    video.track = payload.video.track.uuid;

    payload = { video: video, track: tracks };

    return this._super(store, type, payload, id, requestType);
}

Pluralization is really important for Ember Data to understand the relationships, even though the model relationship is a belongsTo.

You can see this clearly in the desired (working) JSON

{
    "video": {
        "id": "8a660002-03c6-4b8e-bd8b-4ce28fa0dacd",
        "state": "pending",
        "theme": "basic",
        "resolution": "nHD",
        "title": "Test title",
        "track": "2"
    },
  "track": [{
         "id": "2",
         "state": "complete",
         "source": "upload"
     }]
}

The track value in video isn't wrapped in an array, yet the root track value is an array.

For this reason I found it very useful first define the desired JSON and test it working first, then try to munge the real JSON into that format.

I think a tool to help with this process (visualising real-time JSON output from seraliziation) could be a great addition to Ember Data & something I'm going to look into creating.

Upvotes: 4

Related Questions