Ember, hasMany and belongsTo doesn't work

Question

I tried a simple emberapp to display some userdata.

My API returns me this json:

{
   "roles":[
      {
         "id":5,
         "name":"admin",
         "alias":"Administrator",
         "users":[
            {
               "id":1,
               "username":"Evolutio",
               "email":"mail@evolutio.tld",
               "display_role":"Administrator"
            }
         ]
      },
      {
         "id":2,
         "name":"user",
         "alias":"Benutzer",
         "users":[

         ]
      },
      {
         "id":1,
         "name":"banned",
         "alias":"Gesperrt",
         "users":[

         ]
      },
      {
         "id":3,
         "name":"mod",
         "alias":"Moderator",
         "users":[

         ]
      },
      {
         "id":4,
         "name":"support",
         "alias":"Supporter",
         "users":[

         ]
      }
   ]
}

my user/model.js:

import DS from 'ember-data';

export default DS.Model.extend({
  username: DS.attr('string'),
  email: DS.attr('string'),
  display_role: DS.attr('string'),

  roles: DS.belongsTo('role'),
});

and my role/model.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  alias: DS.attr('string'),

  users: DS.hasMany('user'),
});

With this setup I got this error in my developer console:

Error while processing route: team.index Assertion Failed: Passing classes to store methods has been removed. Please pass a dasherized string instead of undefined EmberError@

I didn't get the mistake. Maybe anyone can help me for this.

Answer 1

You would need to sideload the data and make your API return data like this:

  {
     "users": [{
        "id": 1,
        "username": "Evolutio",
        "email": "mail@evolutio.tld",
        "display_role": "Administrator",
        "roles": [5]
     }],
     "roles": [{
        "id": 5,
        "name": "admin",
        "alias": "Administrator",
        "users": [1]
     }, {
        "id": 2,
        "name": "user",
        "alias": "Benutzer",
        "users": []
     }, {
        "id": 1,
        "name": "banned",
        "alias": "Gesperrt",
        "users": []
     }, {
        "id": 3,
        "name": "mod",
        "alias": "Moderator",
        "users": []
     }, {
        "id": 4,
        "name": "support",
        "alias": "Supporter",
        "users": []
     }]
  }

If you must embed the data like you did, you might want to look into EmbeddedRecordsMixin[ http://emberjs.com/api/data/classes/DS.EmbeddedRecordsMixin.html]

But I would like to suggest few things:

1) follow json-api( http://jsonapi.org/ ) since ember data follows it and supports it out of the box( starting from ver 1.13.0 I think)

2) Take it or throw it idea - I don't know your requirement but ideally user model would have hasMany relationship to roles. So I would do things bit differently like this:

//user/model.js:
import DS from 'ember-data';

export default DS.Model.extend({
  username: DS.attr('string'),
  email: DS.attr('string'),
  //display_role: DS.attr('string'),//you don't need this, since user can have multiple roles and also you can access it from the user model itself by doing model.roles.forEach((role)=>{ role.alias or role.name})
  roles: DS.belongsTo('role')
});


//role/model.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  alias: DS.attr('string')
});

because generally there will be fewer roles than users and also you wouldn't want to load all that data(roles and users) in one request call.