Embedded Record is not getting loaded in Ember.js

Question

Following is the JSON data I am trying to load using ember-data:

{
  "product" : [
    { 
        "id" : 1,

        "name" : "product1",

        "master" : {

            "id" : 1,

            "name" : "product1",

            "images" : [
                {
                    "id" : 1,
                    "productUrl" : "/images/product1_1.jpg"
                },

                {
                    "id" : 2,
                    "productUrl" : "/images/product1_2.jpg"
                }
            ]

        }
    },

    { 
        "id" : 2,

        "name" : "product2",

        "master" : {

            "id" : 2,

            "name" : "product2",

            "images" : [
                {
                    "id" : 3,
                    "productUrl" : "/images/product2_1.jpg"
                },

                {
                    "id" : 4,
                    "productUrl" : "/images/product2_2.jpg"
                }
            ]
        }
    }

]
}

The models are as follows:

App.Product = DS.Model.extend
  name: DS.attr('string')
  description: DS.attr('string')
  master: DS.belongsTo('master')

App.Master = DS.Model.extend
  images: DS.hasMany('image')

App.Image = DS.Model.extend
  productUrl: DS.attr('string')

The Application Serializer code is as follows:

App.ApplicationSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin,
attrs: {
  images: { embedded : 'always' }
  master: { embedded : 'always' }
}
)

The problem is that the "master" model records are being returned empty. I am not sure, where I am going wrong.

I am using the following platform configuration:

ember-source (1.4.0)
ember-data-source (1.0.0.beta.7)
ember-rails (0.15.0)
Rails (4.1.0)

Thanks

Emberino Emberino · Accepted Answer · 2014-06-08T15:21:24

A couple of things jump out at me immediately. First you need to finish defining your models to properly receive the relationships.

App.Product = DS.Model.extend
  name: DS.attr('string')
  description: DS.attr('string')
  master: DS.belongsTo('master')

App.Master = DS.Model.extend
  images: DS.hasMany('image')
  products: DS.hasMany('product')

App.Image = DS.Model.extend
  productUrl: DS.attr('string')
  master: DS.belongsTo('master')

Emberdata operates opposite of rails when considering relationship ID's. The id key has to exist on the parent object as opposed to the child object as the convention in rails, which I'm assuming your backend is running off of because you are using the active model serializer in ember.

Secondly you should be using a model specific serializer for this data, as you may have issues down the road trying to serialize data in other models. The ember convention is to look for a serializer with the same name as the model so changing your serializer code to

App.ProductSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin,
  attrs: {
    images: { embedded : 'always' }
    master: { embedded : 'always' }
  }
)

Will let ember know that you want to use this serializer for the product model class.

Also, when you say that the records are returning empty, where exactly are they returning empty? Is it in the data section of the ember inspector? Or is it in the payload that is being send into the serializer? What is being asked for from the ProductRoute class? These are some things that will point you in the right direction towards finding the problem if it isn't solved by fixing the model relationships.

Embedded Record is not getting loaded in Ember.js

2 Answers