Convert Ember-Data Model into an Array

Question

I'm trying to convert Ember-Data Model instances to an array with the goal of loading it into an Handsontable (http://handsontable.com). The toArray() method does not seems to convert the attributes of the StatVals Model to an Array but to create an Array of StatVals objects. How to properly construct an Array from a Ember-Data Model Attributes?

Further, I want the new array to contain the time and element and not the other attributes of the statVal model. How should I approach this?

The View that construct the Handsontable:

App.chapterView = Ember.View.extend({
  tagName: 'div',
  classNames: ['dataTable'],
  insertTable: function(){
    var divElement = jQuery('.dataTable');
    var data = this.get('controller.model.statVals').toArray();
    divElement.handsontable({ data: data });
  }.on('didInsertElement')
});

Model:

App.Chapter = DS.Model.extend({
  name: DS.attr('string'),
  createdDate: DS.attr('date'),
  statVals: DS.hasMany('statVal', { inverse: 'chapter', async: true}),
  user: DS.belongsTo('user', { inverse: 'chapter', async: true} )
});


App.StatVal = DS.Model.extend({
  time: DS.attr('date'),
  Element: DS.attr('number'),
  Chapter: DS.belongsTo('chapter'),
  user: DS.belongsTo('user', { inverse: 'statVals', async: true} )
});

I found the below related questions but I'm not convince that they present the best approach to my situation:

ember-data as data for d3

What is the Ember way of converting retrieved Ember Data records into plain objects?

Samuel Segal Samuel Segal · Accepted Answer · 2014-11-30T20:32:24

Simply removing the statVals in var data = this.get('controller.model.statVals').toArray(); enabled me to feed the Handsontable table with data from Ember-Data. The complete View code is:

    App.chapterView = Ember.View.extend({
      tagName: 'div',
      classNames: ['dataTable'],
      insertTable: function(){
        var divElement = jQuery('.dataTable');
        var data = this.get('controller.model').toArray();
        divElement.handsontable({ data: data });
      }.on('didInsertElement')
    });

Convert Ember-Data Model into an Array

1 Answers