Search code examples
javascriptember.jsember-data

Modify data before render

What is the proper way to change data before rendering a template in below example?

model() from my route:

  model({contractId}){
    const cities = this.store.query('city', {contractId});
    return Ember.RSVP.hash({ cities});
  }

Then in my template:

{{orders/order-form cities=model.cities}}

And finally, in my component I'd like to change something in cities, so I created computed object in this way:

 cityOptions: Ember.computed('cities', function(){
    return this.get('cities').map((data)=> ({key: data.id, value: data.name}));
  }),

But this.get('cities') is returning something like this: Class {modelName: "city", query: Object, store: Class, manager: RecordArrayManager…} instead of data. Does anyone know something cool way to get pure data from this.get('cities')? Any help will be appreciated.

Solution

  • This should work:

    import Ember from 'ember';

const {get} = Ember;

export default Ember.Component.extend({

  cityOptions: Ember.computed('cities.@each.name', 'cities.@each.id', function(){
    return this.get('cities').map((city) => ({
      key: get(city, 'id'),
      value: get(city, 'name'),
    }));
  }),
});

    The important thing here is, that cities is an ember array of ember data objects. They are not normal plain JS objects, so you have to use Ember.get(obj, 'prop') or obj.get('prop') instead of obj.prop!