DS.attr Transforms

Published on Mar 18, 2016

DS transforms take the data from the server and make sure it's in a form consumable by your Ember app.

This video covers how to use the built-in transforms, how to create your own, and how to import new transforms via ember-cli addons.



The String transform that's built in:

import DS from 'ember-data';

export default DS.Transform.extend({
  deserialize: function(serialized) {
     return none(serialized) ? null : String(serialized);

  serialize: function(deserialized) {
    return none(deserialized) ? null : String(deserialized);

The example temperature Transform:

import DS from 'ember-data';

// Converts centigrade in the JSON to fahrenheit in the app
export default DS.Transform.extend({
  deserialize: function(serialized) {
    return (serialized *  1.8) + 32;
  serialize: function(deserialized) {
    return (deserialized - 32) / 1.8;

Using transforms:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  temp: DS.attr('temperature')


So we’ve used DS.attr before, and we’ve given it the type, but we may have not completely understood what that data type was doing. What it does is it triggers a transform.

So when you use DS.attr without a type, then it’ll just pass through the information directly. But when you add in a type, it will do a transform. And today we’re going to be talking about how transforms work, the four built-in transforms, and different ways that you can add your own transforms.

So, from the documentation we can see that the four transform types are string, number, boolean, and date. Let’s look at those in a bit more detail.

So here’s our BooleanTransform. We can see that it extends from the Transform class, and then it has a deserialize and a serialize method. So what the deserialize method does... so first it gets the type of whatever you’re passing it. And if that type is boolean, it should pass it straight on through. If it’s a string, it matches to see if it says true or t or 1. 1 can be true in various languages like C.

And then number, it’ll also check for 1. Otherwise, it will return false. So it goes through a series of steps to find anything that could match to true, and if it doesn’t find that it returns false. So that’s how it’s able to turn strings and numbers into booleans. And then on the way back up, during serialize, it turns it into a Boolean object.

A similar process is undergone for the other three. So with date, it’s going to get the type, and once again it’s going to process it differently based on whether it’s a string or a number, or something else.

Then when it’s sending it back up to the server with the serialize method, it’s going to check to see if it’s a date, and if it is, then it’s going to use the toISOString method, which will turn it into the ISO format as a string. Otherwise it’s just going to return null. And if it didn’t have this then this would throw an error when date was null.

And we’ll see that the checking for null happens quite a bit. That’s actually most of what’s happening here in number, and all of what’s happening here in string.

So those are the four that come built-in, and honestly they cover most of the use cases/used cases [03:00], but if you need more, you can make your own.

So what you do is you create a transforms folder within your app, and then you create a file with the name of the transform. So to use this, you do DS.attr.temperature. So if we had this in our app, this is what it would look like.

Alright. And so we have our deserialize and serialize methods, just like we had in our basic four, and then we return whatever the result is of the calculations that we want to do.

And once again remember while you’re doing this, deserialize is coming from the server,serialize is going back up to the server.

So like I said, the basic four cover most of what you need, and the reason that I’m doing this example from the guides is because I couldn’t think of one that one of my apps needed. But of the ones that aren’t covered, there are some fairly common cases, and those typically get put into add-ons, and mostly they’re around different types of dates. This one for example makes sure that all your dates that are coming in are put on to the UTC time zone instead of the local time zone.

And so that’s it for transforms. Before we go, I did want to mention that this is one instance of the adapter pattern. And if you want to see these as well as several other types of adapter patterns used within Ember data, you could do worse than checking out this EmberCONF 2015 talk, by Godfrey Chan.

Alright. Good luck with your transforms and I’ll see you next time.

Subscribe to our mailing list