nested JSON-API attributes ember example

application.controller.js

import Ember from 'ember';
import Serializer from '../serializers/author';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  serialized: Ember.computed(function() {
    return JSON.stringify(this.get('model').serialize(), null, 2);
  })
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let cards = [
      this.get('store').createRecord('card', { capacity: '32' }),
      this.get('store').createRecord('card', { capacity: '64' })
    ];
    let cameras = [
      this.get('store').createRecord('camera', { manifacturer: 'Canon', cards }),
      this.get('store').createRecord('camera', { manifacturer: 'Nikon' })
    ];
    return this.get('store').createRecord('author', { name: 'John', cameras });
  }
});

application.template.hbs

<h1>Nested resources in EmberJS</h1>
<p>This example shows how Ember-Data is serializing embedded records when saving. It is related to some discussions on GitHub:</p>
<ul>
<li>https://github.com/json-api/json-api/issues/795#issuecomment-159926461</li>
<li>https://github.com/cerebris/jsonapi-resources/issues/424</li>
</ul>
<p>But it should outline the reason for implementing deserialization of nested attributes in the active model serializers JSONAPI deserializer, even if this is not part of the JSONAPI spec yet.</p>
<p>see: https://github.com/spieker/active_model_serializers/tree/feature/nested_attributes</p>
<pre>
{{serialized}}
</pre>

models.author.js

import DS from 'ember-data';

export default DS.Model.extend({
  // Relationships
  cameras: DS.hasMany('camera'),
  
  // Attributes
  name: DS.attr('string')
});

models.camera.js

import DS from 'ember-data';

export default DS.Model.extend({
  // Relationships
  author: DS.belongsTo('author'),
  cards: DS.hasMany('cards'),
  // Attributes
  manifacturer: DS.attr('string')
  
  
});

models.card.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  camera: DS.belongsTo('camera'),
  capacity: DS.attr('string')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
});

export default Router;

serializers.author.js

import DS from 'ember-data';

const validKeys = ['attributes', 'data', 'id', 'links', 'relationships', 'type']

export default DS.JSONAPISerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
    cameras: { embedded: 'always' }
  },

  // fix: move array to the data section
  serialize(snapshot, options) {
    let payload = this._super(snapshot, options);
    this.reorganizeObject(payload.data);
    return payload;
  },
  reorganizeObject(dataObject){
    let existingKeys = Object.keys(dataObject);
    let invalidKeys = this.filterKeysByInvalid(existingKeys);
    if (invalidKeys.length > 0 && !dataObject.relationships) {
      dataObject.relationships = {};
    }
    invalidKeys.forEach(item => { 
      this.processNestedObjects(dataObject, item);
      dataObject.relationships[item] = dataObject[item];
      delete dataObject[item];
    });
  },
  processNestedObjects(dataObject, item){
    if(Ember.isArray(dataObject[item])){
        dataObject[item].forEach(dataPayload => {
          this.reorganizeObject(dataPayload.data);
        })
    }else{
      this.reorganizeObject(dataObject[item].data);
    }
  },
  filterKeysByInvalid(keys){
    return keys.filter(function(item){
      return !validKeys.includes(item);
    })
  }
});

serializers.camera.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
    author: { serialize: false },
    cards: { embedded: 'always' }
  }
});

serializers.card.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend( {
  attrs: {
    camera: { serialize: false }
  }
});

twiddle.json

{
  "version": "0.6.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.4.3",
    "ember-data": "2.4.0",
    "ember-template-compiler": "2.4.3"
  }
}