Trying to get many to many to work with Rails and Emberjs

Question

I'm trying to get many to many associations to work with Ember JS and Rails but it doesn't seem to be rendering the Role Name

Below are the files:

users/index.hbs

{{#each}}
                <tr>
                    <td>{{id}}</td>
                    <td>{{email}}</td>
                    <td>{{title}}</td>
                    <td>{{first_name}}</td>
                    <td>{{last_name}}</td>
                    <td>{{position}}</td>
                    <td>{{work_phone}}</td>
                    <td>{{company}}</td>
                    <td>{{sign_in_count}}</td>
                    <td>{{last_sign_in_ip}}</td>
                    <td>{{confirmed_at}}</td>
                    <td>{{created_at}}</td>
                    <td>
                        {{#each role in roles}}
                            {{role.name}}
                        {{/each}}
                    </td>
                    <td>
                        {{#linkTo 'user' this class='btn btn-sm btn-primary'}}Show{{/linkTo}}
                        <a href="javascript:;" {{action delete this}} class="text-danger">Delete</a>
                    </td>
                </tr>
                {{/each}}

user.js.coffee

VirtualExhibition.User = DS.Model.extend
    email: DS.attr 'string'
    password: DS.attr 'string'
    title: DS.attr 'string'
    first_name: DS.attr 'string'
    last_name: DS.attr 'string'
    position: DS.attr 'string'
    work_phone: DS.attr 'string'
    company: DS.attr 'string'
    sign_in_count: DS.attr 'number'
    last_sign_in_ip: DS.attr 'string'
    confirmed_at: DS.attr 'date'
    created_at: DS.attr 'date'
    venue: DS.hasMany 'VirtualExhibition.Venue'
    roles: DS.belongsTo 'VirtualExhibition.Role'

role.js.coffee

VirtualExhibition.Role = DS.Model.extend
    id: DS.attr 'number'
    name: DS.attr 'string'
    users: DS.hasMany 'VirtualExhibition.User'

user_serializer.rb

class UserSerializer < ActiveModel::Serializer
  attributes :id, :email, :title, :first_name, :last_name, :position, :work_phone, :company, :sign_in_count, :last_sign_in_ip, :confirmed_at, :created_at
  has_many :roles, embed: :ids
end

role_serializer.rb

class RoleSerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :users, embed: :ids
end

I'm getting role_ids as arrays as expected from my Rails application.

But I'm not sure why I'm not getting anything from {{role.name}}

Why is this the case?

JSON

{
users: [
{
id: 2,
email: "example1@gmail.com",
title: "Mr",
first_name: "AA",
last_name: "BB",
position: "Web Dev",
work_phone: "12314",
company: "CC",
sign_in_count: 0,
last_sign_in_ip: null,
confirmed_at: null,
created_at: "2013-11-08T14:27:32.401Z",
role_ids: [
4
]
},
{
id: 3,
email: "example2@example.com",
title: null,
first_name: "Host",
last_name: "Host",
position: null,
work_phone: null,
company: null,
sign_in_count: 0,
last_sign_in_ip: null,
confirmed_at: "2013-11-11T11:09:16.796Z",
created_at: "2013-11-11T11:09:16.832Z",
role_ids: [
1
]
},
{
id: 4,
email: "info@ggg.com.au",
title: null,
first_name: "Visitor",
last_name: "Visitor",
position: null,
work_phone: null,
company: null,
sign_in_count: 0,
last_sign_in_ip: null,
confirmed_at: "2013-11-11T11:09:17.123Z",
created_at: "2013-11-11T11:09:17.125Z",
role_ids: [
2
]
},
{
id: 1,
email: "aaa@saa.com.au",
title: "Mr",
first_name: "Hi",
last_name: "Hello",
position: "Web Developer",
work_phone: "123456",
company: "Comp",
sign_in_count: 11,
last_sign_in_ip: "127.0.0.1",
confirmed_at: "2013-10-29T12:26:00.583Z",
created_at: "2013-10-29T12:23:25.453Z",
role_ids: [
3
]
}
]
}

score 1 · Accepted Answer · answered Nov 13 '13 at 14:44

1

You have some errors in your configuration:

user.js.coffee

VirtualExhibition.User = DS.Model.extend
    email: DS.attr 'string'
    password: DS.attr 'string'
    title: DS.attr 'string'
    first_name: DS.attr 'string'
    last_name: DS.attr 'string'
    position: DS.attr 'string'
    work_phone: DS.attr 'string'
    company: DS.attr 'string'
    sign_in_count: DS.attr 'number'
    last_sign_in_ip: DS.attr 'string'
    confirmed_at: DS.attr 'date'
    created_at: DS.attr 'date'        
    venue: DS.hasMany 'venue', async: true
    # here I think that you want hasMany instead of belongsTo, additionally the async: true is needed, since your are fetching the data using ajax.
    # and instead of "VirtualExhibition.Role" you need to use just "role"
    roles: DS.hasMany 'role', async: true

JSON

{
    id: 2,
    email: "example1@gmail.com",
    ...        
    created_at: "2013-11-08T14:27:32.401Z",
    // use roles instead of roles_id
    roles: [
        4
    ]
}

This is the fiddle with the updated code http://jsfiddle.net/marciojunior/MKu46/

In addition I recommend you to give a look in the DS.ActiveModelAdapter, to get a best integration with rails active model serializers.

answered Nov 13 '13 at 14:44

Marcio Junior

19,078
4
44
47

As soon as I change hasMany to lowercase without `VirtualExhibition` it doesn't seem to be working. Is there a reason why? It seems I need to have `VirtualExhibition.Venue` or `VirtualExhibition.Role` – Passionate Engineer Nov 13 '13 at 23:46
Hmm strange. What is the ember data version? – Marcio Junior Nov 14 '13 at 00:03
DEBUG: ------------------------------- application.js:5533 DEBUG: Ember : 1.1.0 application.js:5533 DEBUG: Handlebars : 1.0.0 application.js:5533 DEBUG: jQuery : 2.0.3 application.js:5533 DEBUG: ------------------------------- – Passionate Engineer Nov 14 '13 at 00:36
Where can I find Ember-data version in my Rails app? – Passionate Engineer Nov 14 '13 at 00:36
This is what I have in the `Gemfile.lock` ember-data-source (0.14) – Passionate Engineer Nov 14 '13 at 00:37
So your ember data version is 0.14. Strange doesn't appear in the console. In ember data 0.14 the relationship model, need to use the full name, in your case "VirtualExhibition.Venue". And doesn't need `async: true`. – Marcio Junior Nov 14 '13 at 00:55
I recommend you to update when possible to the last version `1.0.0-beta.X` it's more simple and you can use the ActiveModelAdapter. The transition guide is [here](https://github.com/emberjs/data/blob/master/TRANSITION.md) – Marcio Junior Nov 14 '13 at 00:58
ember-data-source only deals with 0.14 is there a way to get 1.0.0 for Rails? Could there be any Gem to get this or should I just add them manually as part of Asset Pipeline Vendor? – Passionate Engineer Nov 14 '13 at 01:20
Try to add `gem 'ember-data-source', '~> 1.0.0.beta.3'` – Marcio Junior Nov 14 '13 at 03:04

Edu · Answer 2 · 2013-11-13T15:16:54.683

The template has a typo, should be each role in roles, singular word

                    {{#each role in roles}}
                        {{role.name}}
                    {{/each}}

And you should sideload roles

{
    users: [
        {
        id: 2,
        email: "example1@gmail.com",
        title: "Mr",
        first_name: "AA",
        last_name: "BB",
        position: "Web Dev",
        work_phone: "12314",
        company: "CC",
        sign_in_count: 0,
        last_sign_in_ip: null,
        confirmed_at: null,
        created_at: "2013-11-08T14:27:32.401Z",
        role_ids: [
        4
        ]
        },
        { more users...}
    ],
    roles: [
        {role object},
        {role object}
    ]
}

Or define your Hasmany relation as async

VirtualExhibition.User = DS.Model.extend
email: DS.attr 'string'
password: DS.attr 'string'
title: DS.attr 'string'
first_name: DS.attr 'string'
last_name: DS.attr 'string'
position: DS.attr 'string'
work_phone: DS.attr 'string'
company: DS.attr 'string'
sign_in_count: DS.attr 'number'
last_sign_in_ip: DS.attr 'string'
confirmed_at: DS.attr 'date'
created_at: DS.attr 'date'
venue: DS.belongsTo 'VirtualExhibition.Venue'
roles: DS.hasMany 'VirtualExhibition.Role',{async:true}

Good luck

Can you post a Copy of the json you are receiving – Edu Nov 13 '13 at 13:18 — Edu, Nov 13 '13 at 13:18
I just pasted JSON that are being received by user model – Passionate Engineer Nov 13 '13 at 14:00 — Passionate Engineer, Nov 13 '13 at 14:00

Trying to get many to many to work with Rails and Emberjs

2 Answers2