Create an array of Ember.Object

Asked By: Anonymous

I’m sure there is a simple solution to this basic question but frankly I can’t find it on Emberjs.com nor on Stackoverflow (maybe i ask to wrong question).

I’m using amChart library to chart data. amChart requires that I pass a “standard” array of objects. So I tried to convert my Ember.object into an array with the toArray() method. But I understand that now that the toArray() method create an array of Ember.objects with the result that amChart cannot find the attributes that I mapped in amChart.

In other words, I need an array which attributes can be access by conventional javascript syntax ( array[1].attribute ) instead of ‘object.get(‘attribute’)’.

Or maybe I should take another approach to this?

UPDATE

From the answer below I concluded that I needed to create a new array for amChart:

  chartData: function() {
    var statVals = this.get('chapters.statVals');
    var statArray= statVals.toArray();
    var amCharts = [];
    var chartData = [];

    for (var i = 0; i < statArray.length; i++) {
        chartData.push({
            time: statArray[i].get('time'),
            value: statArray[i].get('value'),
        });
    }
    return chartData;
  }.property(),

If anyone has a more efficient / better Ember way to approach this, I would gladly modify this solution.

Solution

Answered By: Anonymous

I would say you have two options:

1. Avoid using computed properties in the Ember objects, as normal properties can be accessed without using get() (Example). This should work as if you were passing normal JS objects (which Ember objects are in the real sense).
2. Create a toJsObject() (or similar) on your objects that will convert them to normal JS objects, computed properties and all. Example:

   var Widget = Ember.Object.extend({
       toJsObject: function() {
           return {
               prop1: this.get('prop1'),
               prop2: this.get('prop2')
           };
       }
   });
   
   // ...
   
   var normalObjects = emberObjects.toArray().map(function(obj) {
       return obj.toJsObject();
   });