Ember display data in table format - ember.js

Question

I have various coffee drinks from a coffee store. There are various drinks (Mocha, Drip, CustomDrink1, etc) that have different sizes. I need to make a table that displays those drinks with the drink on the y-axis and size as the x-axis.
So for example I have Mocha 12oz, 16oz, 20oz; Drip 12oz, 16oz, 20oz; My Custom Drink 12oz, 16oz, 20oz.
This project is using Ember 1.13
// models/store-drink.js
export default DS.Model.extend({
_store: DS.belongsTo('store', {async: true}),
type: DS.attr('string'),
size: DS.attr('number'),
price: DS.attr('number'),
active: DS.attr('boolean'),
custom: DS.attr('boolean'),
});
My general idea is to get the data in the route and then loop through it somehow in the template. The important attributes for the problem are type and size because I need to dispaly a row with a drink type (Mocha) and then all the sizes (12oz, 16oz, 20oz)
// routes/menu.js
export default Ember.Route.extend({
model: function() {
let myStoreId = this.controllerFor('application').get('myStore.id');
return Ember.RSVP.hash({
myStore: this.store.find('store', myStoreId),
storeMilk: this.store.find('storeMilk', {'store':myStoreId}),
milk: this.store.find('milk', {'store':myStoreId}),
storeDrinks: this.store.find('store-drink', {'store':myStoreId})
});
},
setupController: function(controller, model) {
controller.setProperties({
'storeMilk': model.storeMilk,
'storeDrinks': model.storeDrinks,
'milk': model.milk,
'myStore': model.myStore,
});
}
}
In the template I run into problems because I can't figure out how to split this data by drink type.
<table class="table table-striped">
<thead>
<tr>
<th>Drink</th>
<th>12oz</th>
<th>16oz</th>
<th>20oz</th>
<th>24oz</th>
<th>32oz</th>
</tr>
</thead>
<tbody>
/* all of this is here is wrong. I believe I would need to do 2
loops. the first one would be to create rows that represent drink
types, and then the second loop would loop through the drink type
and display the sizes in the columns.
*/
{{#each storeDrink in storeDrinks}}
<tr>
<td>{{storeDrink.type}}</td>
{{#each drink in storeDrinks}}
<td class="{{unless drink.active 'disabled'}}" {{action 'setDetailDrink' drink}} id="drink-{{drink.id}}">
{{#if drink.active}}
{{decimal drink.price}}
{{else}}
<span class="fa fa-close"></span>
{{/if}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
I have been stuck on this for months, off and on (since Ember 1.13 was latest). Before I got by by splitting the drinks into different scope variables before it got to the template. It was a hacky workaround, and doesn't work anymore because now users can add custom drinks so I can't hardcode the drink types anymore.
I might be going about this completely wrong, any suggestions welcomed.

Answer 1

I would recommend to have a computed property that calculates the data in a way you can consume it in your template.
types: Ember.computed('drinks', {
get() {
return get(this, 'drinks').reduce((total, curr) => {
if(!total.findBy('type', get(curr, 'type'))) {
total.push(get(curr, 'type'));
}
return total;
}, []).map(type => ({
type,
sizes: get(this, 'drinks').filterBy('type', type)
}));
}
})
Then you can loop through it with
{{#each types as |type|}}
type {{type}} has following sizes:
{{#each type.sizes as |size|}}
{{size.size}}
{{/each}}
{{/each}}