How to filter an array of records by a property value in Ember.js

by Kasper Tidemann

Say you have an array of records in an ArrayController. You may ask yourself: is it possible to filter the array and only get those records that match a given property value?

Luckily, the answer is yes. It’s possible by using the excellent filterProperty function:

App.Fruit = DS.Model.extend({
  type: DS.attr('string'),
  name: DS.attr('string')
});

App.FruitController = Em.ArrayController.extend({
  content: [],
  berries: (function() {
    this.get('content').filterProperty('type', 'berry');
  }).property('content.@each.type')
});

There are two things you should note here:

First, the use of filterProperty to get only the records that has a type property that matches "berry".

Second, berries is a computed property that watches for changes to the berry property in each of the records inside the content array.

This is simple, elegant, and extremely handy functionality.