#83 Group By

Emad Ibrahim
Sep 27, 2016 · 1 min read

Did you ever want to display a list of items grouped by a certain property? I am building an admin backend for hirejs.com and wanted to group jobs by status e.g. pending/approved/declined/expired etc… I did it with the help of the ember-group-by addon (yes, there is an addon for that).

Install addon

ember install ember-group-by

Add a grouped-by property to your controller:

import Ember from 'ember';
import groupBy from 'ember-group-by';

export default Ember.Controller.extend({
jobsByStatus: groupBy('jobs', 'status')
})

And in the template, I can loop over the groups and their items with:

{{#each jobsByStatus as |group|}}
<h3>Jobs with Status: {{group.value}}</h3>
<ul>
{{#each group.items as |job|}}
<li>{{job.title}}</li>
{{/each}}
</ul>
{{/each}}

Originally published at Ember Daily Tips.

Emad Ibrahim

Written by

Husband, Father of Twins, Published Author, Entrepreneur, Passionate Technologist, Programmer and Productivity Nut. more at https://about.me/eibrahim