ember-group-by provides a computed property macro for grouping objects by a given property.
ember install ember-group-by
import Controller from '@ember/controller';
import groupBy from 'ember-group-by';
export default class IndexController extends Controller {
@groupBy('model', 'color')
carsByColor;
}
This will return an array of POJOs with the following properties:
[
{ property: 'color', value: 'red', items: [car1, car2] },
{ property: 'color', value: 'blue', items: [car3, car4] },
{ property: 'color', value: 'green', items: [car5] }
]
Each group object will have the following properties:
property
The name of the property that you grouped the items byvalue
The value for the property that you grouped the items byitems
All of the objects with the matching value for that propertyYou can then use this in your templates to do cool things like:
<h1>Cars grouped by color</h1>
{{#each this.carsByColor as |group|}}
<h3>Cars that have {{group.property}} {{group.value}}</h3>
<ul>
{{#each group.items as |car|}}
<li>{{car.name}}</li>
{{/each}}
</ul>
{{/each}}
There is also an example in test/dummy.
npm test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
For more information on using ember-cli, visit https://ember-cli.com/.