How to get data out of ember objects

Question

I'm fairly new to ember and I'd like to know whats the fastest way to extract the data out of ember objects. I've loaded my model with a very large amount of records using this.store.find('modelName);` in my route.

I created a component on my view using {{kendo-ui.kendo-table descriptor=tableDescriptor data=model}}. My controller defined other arguments to be passed to my component (descriptor).

In my components.js I'm' getting the data passed over by using

export default Ember.Component.extend({

didInsertElement: function() {
  var columns = this.get('descriptor.columns'); // this is right
  var model = this.get('data')['content'];      // this returns the objects of the model
  var height = this.get('descriptor.height');   // this is ok too
  Ember.$('#kendo-table').kendoGrid({
    dataSource: {
      data: model,
      pageSize: 100
    },
    height: height,
    scrollable: {
        virtual: true
    },
    groupable: true,
    sortable: true,
    columns: columns
  });
  }
});

On the line var model = this.get('data')['content'];, this gives me an Array of Ember Classes. Inside each class, there is a _data object that holds the value of the actual class.

The easiest solutions is to just loop through and extract the _data but that is no good for larger model array. Is there a quick way to extract all the _data from my array of ember objects?

@Artych You mean this.get('data').get('data') since first level is referring to the array of classes and the second level is referring to... each object in the array? — lzc
May be I do not understand you... 1) this.store.find('modelName') is promise that resolved as RecordArray 2) you could get it in route controller as model 3) you pass model to component as data => 4) so my answer is this.get('data') in component — artych
Oh I see, I have a model using this.store.find('modelName'), it is binded to my controller. My controller has an attribute named model I believe this includes this.controller and the model its binded to. I then pass the model to my component. Now I need to get the data that came from this.store.find('modelName').get('data'), should I inject my component with the store as components don't come with it? — lzc
Misunderstanding between us. Once more, please. 1) Let I have model person (with 1 attr name). In router this.store.find('person') is promise. In controller it is already resolved as RecordArray, for example first element name: this.get('model').get('firstObject').get('name'). 2) you pass model to component as data => my answer is this.get('data') in component — artych

artych artych · Accepted Answer · 2015-06-16T20:54:59

You could use getProperties method. http://emberjs.com/api/classes/Ember.Object.html#method_getProperties

To get the values of multiple properties at once, call getProperties with a list of strings or an array:

 record.getProperties('firstName', 'lastName', 'zipCode');
 // { firstName: 'John', lastName: 'Doe', zipCode: '10011' }

You could define computed property dataArray:

dataArray: function() {
  return this.get('data').map( function(item) {
     return item.getProperties('id', ... ); // your list of properties
  });
}.property('data.[]'),

didInsertElement: function() {
  //...
  Ember.$('#kendo-table').kendoGrid({
    dataSource: {
      data: this.get('dataArray'),
      //...
    },
    // ...
   });
}

UPDATE: for records (DS.Model) you could use toJSON method. Use DS.JSONSerializer to get the JSON representation of a record.

toJSON takes an optional hash as a parameter, currently supported options are:

includeId: true if the record's ID should be included in the JSON representation.

http://emberjs.com/api/data/classes/DS.Model.html#method_toJSON

How to get data out of ember objects

1 Answers