Best way to group model items by a property


I’m trying to group items (e.g. posts) on a given route by a property (e.g. category). I envision showing a lists of categories, and up to 10 of the most recent posts per category.

I’m unsure how to approach this, but came across this ember-group-by add-on that seems to fit the bill.

I’m curious how more experienced Embereños would tackle this. Thanks.


I think for most uses, that addon would work great. Writing a computed property yourself would not be too difficult either.

For more sophisticated uses, you could look at the ember-cli-d3 shape addon. This allows you to easily use the very powerful d3 data manipulation functions. Specifically, d3’s nest is used for grouping. It allows you to do multi-level grouping, key sorting, rollups, etc. For example, if you wanted to group by category, then by year, you could write a computed property like this:

import { nest } from 'd3-collection';
import { ascending, descending } from 'd3-array';


  postsByCategoryAndYear: Ember.computed('posts', function() {
    let posts = this.get('posts');

    return nest()
      .key((d) => d.category).sortKey(ascending)
      .key((d) => d.year).sortKey(ascending)

NOTE: This assumes the posts are POJOs. If you have Ember objects, then you can update d.category to d.get('category') for instance.


In addition to your note, it’s also very important to use posts.toArray() - d3 is looking for plain Javascript arrays, and ember model Classes throw it off.