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.

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store