Formatting JSON from Rails for Ember

Question

At the moment the JSON in my rails API with ember front end app is formatting incorrectly for my images model as shown below.

This results in the ember Chrome tool showing the data for my Project_image as 'object Object' and project_id as 'null' which isn't very useful in my templates.

How can I format the JSON using Active_Model_Serializer to output the data correctly.

Current JSON Example:

{
  "images":
    [
      {
        "id":6,
        "project_image":
          {"project_image":
            {"url":"/uploads/image/project_image/6/example_image.jpg"}
          },
        "project_id":8
      }
     ]
}

Current image_serializer.rb

class ImageSerializer < ActiveModel::Serializer
  attributes :id, :project_image, :project_id
end

Any help would be much appreciated! :)

Ember Models

Image

App.Image = DS.Model.extend({
  project_image: DS.attr('string'),
  project_id: DS.attr('number'),

  project: DS.belongsTo('project')
});

Project

App.Project = DS.Model.extend({
  client: DS.attr('string'),
  tags: DS.attr('string'),
  description: DS.attr('string'),
  start_date: DS.attr('string'),
  end_date: DS.attr('string'),

  images: DS.hasMany('image')
});

Rails Models

Image

class Image < ActiveRecord::Base
  belongs_to :project
  mount_uploader :project_image, ImageUploader
end

Project

class Project < ActiveRecord::Base
  has_many :images, :dependent => :destroy
  accepts_nested_attributes_for :images, allow_destroy: true
end

All Project model data loads correctly, the error is only with the images model.

What models do you have in Rails? Image and Project? What are the relationships between them? — Kalman, Jan 15 '15 at 18:58
I do indeed has Image and Project Models. Images belong_to projects and projects has_many images :) — Tom Pinchen, Jan 15 '15 at 19:04

davidkovsky · Answer 1 · 2015-01-15T19:20:53.410

1

Update: I think something like this will solve the problem:

class ImageSerializer < ActiveModel::Serializer
  attributes :id, :project_image_url, :project_id

  def project_image_url
    project.image_url
  end
end

The key is to send the url over as a string. You can play with the name too, just make sure the name matches in the Ember model.

What version of active_model_serializers are you using? I had similar issues. 0.8.x fixed it for me, per the Readme.

edited Jan 15 '15 at 19:20

answered Jan 15 '15 at 18:25

davidkovsky

1,147
8
10

I'm on version 0.9.1 which I previously found is needed to get it collaborating at all with Rails 4.2.0 :) – Tom Pinchen Jan 15 '15 at 18:30
Just tried moving to 0.8.0, unfortunately that seems to stop the app working completely and bring a new variety of errors! – Tom Pinchen Jan 15 '15 at 18:38
I'm on Rails 4.2.0 with AMS 0.8.3. – davidkovsky Jan 15 '15 at 18:47
{"articles": [ {"id":10818,"title":"title"}, {"id":10817,"title":"another title"} ] } – davidkovsky Jan 15 '15 at 18:53
That's my API output above. In Ember, I'm extending the ActiveModelAdapter. Unfortunately, I need to run out now but I hope this helps. – davidkovsky Jan 15 '15 at 18:54
thanks for your help. I've switche to your AMS version and it hasn't broken anything which is good. Still getting the same though - {"images":[{"id":6,"project_image":{"project_image":{"url":"/uploads/image/project_image/6/example_image.jpg"}},"project_id":8}]}. – Tom Pinchen Jan 15 '15 at 18:57
Actually, your output looks a lot like mine. Are you using the ActiveModelAdapter in Ember? – davidkovsky Jan 15 '15 at 18:59
yep - App.ApplicationAdapter = DS.ActiveModelAdapter.extend({}); – Tom Pinchen Jan 15 '15 at 19:00
Can you paste your Ember model definition? – davidkovsky Jan 15 '15 at 19:03
Thanks. I think the problem is with the way project_image is getting serialized as more than a string. I would write a custom method in the serializer to return just the url. – davidkovsky Jan 15 '15 at 19:13
That sounds like it could be the reason. Any chance you could update your answer with a rough example. I am still pretty new to writing serializer methods. – Tom Pinchen Jan 15 '15 at 19:15
Done. I'm really heading out now but I hope that helped. – davidkovsky Jan 15 '15 at 19:21

score 0 · Accepted Answer · answered Jan 16 '15 at 09:55

For anyone who is interested the solution I used DavidKovsky's idea of creating custom methods to ensure the JSON data was passed in the correct format.

Serializer files:

#app/serializers/image_serializer.rb

class ImageSerializer < ActiveModel::Serializer
  attributes :id, :_project_image, :_project_id

  def _project_image
    object.project_image.to_s
  end

  def _project_id
    object.project_id.to_i
  end

end


#app/serializers/project_serializer.rb

class ProjectSerializer < ActiveModel::Serializer
  attributes :id, :client, :tags, :description, :start_date, :end_date
  has_many :images, embed: :ids, include: true
end

Ember Models:

#app/assets/javascripts/models/image.js

App.Image = DS.Model.extend({
  _project_image: DS.attr('string'),
  _project_id: DS.attr('number'),


  project: DS.belongsTo('project')
});

#app/assets/javascripts/models/project.js

App.Project = DS.Model.extend({
  client: DS.attr('string'),
  tags: DS.attr('string'),
  description: DS.attr('string'),
  start_date: DS.attr('string'),
  end_date: DS.attr('string'),

  images: DS.hasMany('image')
});

Ember Store

#app/assets/javascripts/store.js

DS.RESTAdapter.reopen({
  namespace: 'api/v1'
})

App.Store = DS.Store.extend({});
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({});

Usage in Ember Templates (using emblem - emblemjs.com)

#app/assets/javascripts/templates/project.js.emblem

each image in model.images
  img src=image._project_image

Usage in Ember Template using handlebars (incase you're not using emblem)

#app/assets/javascripts/templates/project.js.hbs

{{ #each image in model.images }}
  img src="{{ image._project_image }}"
{{ /each }}

In my gemfile I am using rails '4.2.0.beta4' and active_model_serializers '0.8.3'

I can see that this work around could become cumbersome if you have lots of attributes to convert to strings, integers etc but it does at least work in the short term.

Hope that this helps someone and thanks again to DavidKovsky for his assistance.