Ember Data hasMany sideload returns 0 length

Question

I'm trying to use simple hasMany ember-data association. Data prepared for sideload, ids set. However, the resulting length of association is zero. And data hasn't being displayed.

JSBin: http://jsbin.com/OxIDiVU/378/edit

Code from this JSBin:

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('flags');
});

App.FlagsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('flag');
  }
});

App.FlagsController = Ember.ArrayController.extend({
});

App.ApplicationController = Ember.Controller.extend({
  init: function() {
    this.transitionToRoute('flags');
  }
});

App.ApplicationAdapter= DS.RESTAdapter;

App.Flag = DS.Model.extend({
  country: DS.attr('string'),
  colors: DS.hasMany('color')
});

App.Color = DS.Model.extend({
  name: DS.attr()
});

$.mockjax({
    url:  '/flags',
    dataType: 'json',
  responseText: {
    flags: [
      {
        id: 1,
        country: 'Germany',
        color_ids: [1, 2, 3]
      },
      {
        id: 2,
        country: 'Russia',
        color_ids: [2, 4, 5]
      },
      {
        id: 3,
        country: 'USA',
        color_ids: [2, 4, 5]
      }
    ],
    colors: [
      {
        id: 1,
        name: "black"
      },
      {
        id: 2,
        name: "red"
      },
      {
        id: 3,
        name: "yellow"
      },
      {
        id: 4,
        name: "white"
      },
      {
        id: 5,
        color: "blue"
      }
     ]
  }
});

  <script type="text/x-handlebars" data-template-name="flags">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Country Name</th>
          <th>Flag colors number</th>
          <th>Flag color names</th>
        </tr>
      </thead>
      <tbody>
        {{#each}}
        <tr>
          <td>{{country}}</td>
          <td>{{colors.length}}</td>
          <td>
            {{#each color in colors}}
              {{color.name}}<br>
            {{/each}}
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </script>

score 1 · Accepted Answer · answered Apr 18 '14 at 12:17

1

Checkout the section on JSON conventions. The issue is that ember expects colors instead of color_ids.

http://jsbin.com/OxIDiVU/380/

flags: [
  {
    id: 1,
    country: 'Germany',
    colors: [1, 2, 3]
  },
  {
    id: 2,
    country: 'Russia',
    colors: [2, 4, 5]
  },
  {
    id: 3,
    country: 'USA',
    colors: [2, 4, 5]
  }
],

answered Apr 18 '14 at 12:17

claptimes

1,615
15
20

Could you please explain how to patch it? I have opened a question for a similar problem. http://stackoverflow.com/questions/23823850/emberjs-data-hasmany-sideloading-with-activemodelserializers – kunerd May 23 '14 at 10:52

Ember Data hasMany sideload returns 0 length

1 Answers1