Ember.js / Rails Nested JSON

Question

I'm working on a basic Ember / Rails app that has a bunch of nested relationships, for example:

class Release < ActiveRecord::Base
  has_many :tracks
end

When I hit my Releases endpoint, I'm getting some lovely JSON like this:

{
  releases: [{
    id: 1,
    name: "Release Name",
    artist: "Artist Name",
    tracks: [{
      id: 1,
      name: "Track 1",
    },
    {
      id: 2,
      name: "Track 2",
    }]
  }]
}

I've read almost everything I can find on the web about this. How do I map the "Track" model to Ember, so I can display a release with its tracks at the same time?

DS.hasMany? asyc:true? embedded:true? None of this works for me.

Versions:

Ember: 1.4.0-beta.1+canary.011b67b8
Ember Data: 1.0.0-beta.5+canary.d9ce2a53
Handlebars: 1.1.1
jQuery: 1.10.2

which adapter are you using?

Kingpin2k
– Kingpin2k

2013-12-29 20:23:54 +00:00
Commented Dec 29, 2013 at 20:23 — Kingpin2k
– Kingpin2k, Commented Dec 29, 2013 at 20:23
I'm on DS.ActiveModelAdapter

hhff
– hhff

2013-12-30 04:54:53 +00:00
Commented Dec 30, 2013 at 4:54 — hhff
– hhff, Commented Dec 30, 2013 at 4:54

Laurie Young · Accepted Answer · 2014-01-01 14:58:24Z

1

The following works for me using Active Model Serializer and DS.RESTAdapter

Rails User Model:

class User < ActiveRecord::Base
  has_many :photos
end

Rails User Serializer:

class UserSerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :photos, embed: :ids, key: "photos", include: true
end

(The magic bit the arguments for has_many. That means they get added them as a second array rather than an embedded array, it also sets the title for the association to be photos which is what Ember requires by default)

This makes Rails return JSON that looks like:

{
  user: {
    id: 1,
    name: "Joe Bloggs",
    photos: [1,2]
  },
  photos: [
    {
      id: 1,
      imageSrc: "/photo1.jpg"
    },
    {
      id: 2,
      imageSrc: "/photo2.jpg"
    }
  ],
}

Then in Ember I define the user model like this:

App.User = DS.Model.extend({
  photos: DS.hasMany('photo'),
  name: DS.attr("string")
});

Finally I define a route that loads the user model:

App.UserShowRoute = Ember.Route.extend({
    model: function(params){
    return this.store.find('user', params.user_id);
  }
});

edited Jan 1, 2014 at 14:58

answered Dec 31, 2013 at 1:20

Laurie Young

139k13 gold badges50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hhff Over a year ago

Nailed it! Thanks Laurie - I actually figured this out a couple days ago but haven't had the time to update my post! "embed: :ids, key: "photos", include: true" is the kicker!!

Collectives™ on Stack Overflow

Ember.js / Rails Nested JSON

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related