CODEWITHSUNDEEP
javascriptember.js
Dougui
Dougui

Reputation: 7232

How to display a hasMany association

I'm new to ember and I created a model like this :

# app/models/skill.js
export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  link: DS.attr('string'),
  user: DS.hasMany('user')
});

I have this route :

# app/routes/skill.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('skill', params.id);
  }
});

This router :

# app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource('users', function() {
    this.route('index', { path: '/'} );
    this.route('signup');
  });
  this.resource('skills', function() {
    this.route('index', { path: '/' });
  });
  this.resource('skill', { path: '/skills/:id' });
});

export default Router;

And this template :

# app/templates/skill.hbs
{{#link-to 'skills.index'}}Back{{/link-to}}
{{model.name}}
{{model.description}}

{{#each user in model.user}}
  {{user.nickname}}
{{/each}}

I simply want to have a list of users with their nicknames. This is the response from my api :

{
  "skills": {
    "id": 1,
    "name": "Ember",
    "description": "JS Framework",
    "link": "emberjs.com"
  },
  "users": [
    {
      "id": 1,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T10:40:34.555Z",
      "updated_at": "2015-06-21T10:40:34.555Z"
    },
    {
      "id": 2,
      "email": "test",
      "nickname": "dougui",
      "bio": "blabla",
      "created_at": "2015-06-21T10:40:50.493Z",
      "updated_at": "2015-06-21T10:40:50.493Z"
    },
    {
      "id": 3,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T20:51:29.546Z",
      "updated_at": "2015-06-21T20:51:29.546Z"
    },
    {
      "id": 4,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T20:55:11.163Z",
      "updated_at": "2015-06-21T20:55:11.163Z"
    },
    {
      "id": 5,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T20:55:51.231Z",
      "updated_at": "2015-06-21T20:55:51.231Z"
    },
    {
      "id": 6,
      "email": "email",
      "nickname": "nickname",
      "bio": null,
      "created_at": "2015-06-22T00:01:47.089Z",
      "updated_at": "2015-06-22T00:01:47.089Z"
    }
  ]
}

There is all information about skill and users but nothing is shown.

Why my list is not rendered?

Thanks!

Edit 1

Now, my api is sending this {"skill":{"id":2,"name":"Rails","description":"test","user_ids":[2]}}.

I have this model :

export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  link: DS.attr('string'),
  users: DS.hasMany('users', { async: true })
});

I tried also with :

users: DS.hasMany('users', { async: true })

I don't know what to do. Is it possible to have an example with the current version?

Upvotes: 1

Views: 42

Answers (1)

neciu
neciu

Reputation: 4485

Ember data expects that you will give it a object called skill not skills (skills will be ok for requesting multiple skills, not one instance).

Next thing: your model expects users array in skill object. Right now you are sending it separately.

And last one... You have put full users object instead of just ids of these objects. In that case, you have to add flag {embedded: 'always'} to users property (read more here)

Upvotes: 1

Related Questions