Serializers-Sending Data to the Server with Serialize

Published on May 20, 2016

Ember Data Serializers aren’t just for getting data from the server- they’re also for sending data back. This tutorial explores the serialize method and how it works with the methods serializeAttributes, serializeBelongsTo, serializeHasMany, and serializeIntoHash.


Links

Code

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  serialize(snapshot, options){
    console.log('start serialize', snapshot)
    var oldSerialization = this._super(...arguments)
    console.log('finish serialize', oldSerialization)
    return oldSerialization
  },
  serializeAttribute(snapshot, json, key, attribute){
    console.log('serializeAttribute', snapshot, json, key, attribute);
    var oldSerialization = this._super(...arguments)
    console.log('done serializeAttribute', snapshot, json, key, attribute);
    return oldSerialization;
  },
  serializeBelongsTo(snapshot, json, relationship){
    console.log('serializeBelongsTo', snapshot, json, relationship);
    return this._super(...arguments);
  },
  serializeHasMany(snapshot, json, relationship){
    console.log('serializeHasMany', snapshot, json, relationship);
    return this._super(...arguments);
  },
  serializeIntoHash(hash, typeClass, snapshot, options){
    console.log('serializeIntoHash', hash, typeClass, snapshot, options)
    var oldSerialization = this._super(...arguments);
    console.log('done serializeIntoHash', hash, typeClass, snapshot, options)
    return oldSerialization
  },
})

Transcript

Hey and welcome back to our series on Ember Data 2.0 Serializers. Now in the past in this series, we focused on when something comes in to the app, what will we do with that JSON, and that’s called deserialization. And so that involves extracting stuff and normalizing stuff. And what we’re going to talk about now is how to serialize the data, so when we’re packaging it up to send it to the server, how does that work. And we’re going to go over the basic serialize method and well as the suite of serialize methods that do specific things for attributes, belongsTo relationships, and hasMany relationships, and the wrapper serializeIntoHash method. Let’s get started.

So first, we’ll go to the serialize method. We’ll see that it takes in a snapshot and a set of options, and then it returns a json hash. So let’s go ahead and here in our base serializer I’ve created this, and we’re not changing anything. We’re just seeing what is already changed by the default. So we’re going to print out the snapshot, and then we’re going to print out what is returned by the supercall to serialize.

So here when I hit save, we can see that at the start of the serialization call we get the snapshot, and it has some attributes and it has some relationships, in this case this quote has a book, and then at the end we have an object which has attributes but not underscored. And the attribute has been changed based on the keyFor methods that we did last time. And then it has a relationship which has been changed by the keyFor relationship method.

So how does the serialize method work with the serializeAttribute, serializeBelongsTo, and serializeHasMany methods? Let’s go ahead and log out when those are being done. And so when we click save, we’ll see that we’ll start the serialize method. And then we’ll call the serializeAttribute and serializeBelongsTo methods, and then after that we’ll finish the serialize method. So serializeAttribute and serializeBelongsTo, as well as serializeHasMany which there’s no hasMany relationship on this model, those are all called in between when the serialize method starts and when it ends.

So those are getting called when you’re calling super here. So this gives you some options if you want to change something. You could of course do it before you call super, but I think that’s the least likely candidate for where to change things. You could do it after you call super, and that lets you get everything that’s been done in things like keyFor, things that are already going to change the serialization, and then lets you add your changes on top of those. And then you could do it within the specific methods. This is most likely the place where you’ll want to do that.

So let’s take a quick look at what’s happening inside one of these specific methods. We’re going to do serializeAttribute, although serializeBelongsTo and serializeHasMany work in a similar way. So what we’re going to do is log out what we have at the start, and then we’re going to call super and log out what’s changed here and then return the result. So the key that we really want to be paying attention to is json.

So we’ll see that here we have our serializeAttribute and what we get after we’ve already called super within serializeAttribute. And notice how different these jsons are. So the first one just has an id of 3. The second one has an id of 3 and an attributes hash. And ignore this relationships hash for now. What happened is this object’s been updated because of what’s changed down here, and so it’s been updated within the console. If we put a debugger statement here, we’ll see that when it stops, it does not actually have... here it is... it does not have the relationships, just the attribute. So when you’re debugging this, that’s something to be aware of. The objects in the console sometimes get updated with the information past where you are. So this console.log runs before the belongsTo, but the json, because of how JavaScript works, is updated by the serializeBelongsTo.

So with that little complication out of the way, lets return to looking at the different serialize methods. So serializeBelongsTo and serializeHasMany work in a very similar way to serializeAttribute. But what about serializeIntoHash? What does that do? Let’s go ahead and see what happens. So when we click ‘save’ now, we’ll notice that serializeIntoHash is what’s called first and then everything else is called in between and then it finishes serializing the hash. And we’ll notice what’s changed, the first object that’s passed in the hash, at the start it’s just an empty object, but by the end it ends up having all the data that we’re going to end up passing to the server. So serializeIntoHash is what wraps everything else.

So that should give you some insight into the serialize set of methods on the JSONAPISerializer. So serializeIntoHash wraps serialize, and serialize wraps several instances of serializeAttribute, serializeBelongsTo, and serializeHasMany. If you’re using something besides JSONAPISerializer, let’s say you’re using the RESTSerializer, you’ll notice that not only does it have the same methods, but they work in pretty much the same way as far as I know. I haven’t explored this extensively. But what you’ve learned in this episode should help you tackle your serialization no matter what serializer you choose to use. And if you’ve been keeping up with these live as they’re released, this is going to be the last episode in the serializer series for a while. So I hope you enjoyed it and I’ll see you next week when we have new, exciting stuff to tackle. I’ll see you then.

Subscribe to our mailing list