CODEWITHSUNDEEP
ruby-on-railsjsonember.jsember-dataactive-model-serializers
Tom Pinchen
Tom Pinchen

Reputation: 2497

Formatting JSON from Rails for Ember

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.

Upvotes: 0

Views: 212

Answers (2)

Tom Pinchen
Tom Pinchen

Reputation: 2497

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.

Upvotes: 0

davidkovsky
davidkovsky

Reputation: 1147

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.

Upvotes: 1

Related Questions