Function

filter (dependentKey, additionalDependentKeys, callback) ComputedProperty public

Module: @ember/object
import { filter } from '@ember/object/computed';
dependentKey
String
additionalDependentKeys
Array
optional array of additional dependent keys
callback
Function
returns
ComputedProperty
the filtered array

Filters the array by the callback.

The callback method you provide should have the following signature:

  • item is the current item in the iteration.
  • index is the integer index of the current item in the iteration.
  • array is the dependant array itself.
function filterCallback(item, index, array);

Example:

import { set } from '@ember/object';
import { filter } from '@ember/object/computed';

class Hamster {
  constructor(chores) {
    set(this, 'chores', chores);
  }

  @filter('chores', function(chore, index, array) {
    return !chore.done;
  })
  remainingChores;
}

let hamster = Hamster.create([
  { name: 'cook', done: true },
  { name: 'clean', done: true },
  { name: 'write more unit tests', done: false }
]);

hamster.remainingChores; // [{name: 'write more unit tests', done: false}]

Classic Class Example:

import EmberObject from '@ember/object';
import { filter } from '@ember/object/computed';

let Hamster = EmberObject.extend({
  remainingChores: filter('chores', function(chore, index, array) {
    return !chore.done;
  })
});

let hamster = Hamster.create({
  chores: [
    { name: 'cook', done: true },
    { name: 'clean', done: true },
    { name: 'write more unit tests', done: false }
  ]
});

hamster.remainingChores; // [{name: 'write more unit tests', done: false}]

You can also use @each.property in your dependent key, the callback will still use the underlying array:

import { set } from '@ember/object';
import { filter } from '@ember/object/computed';

class Hamster {
  constructor(chores) {
    set(this, 'chores', chores);
  }

  @filter('[email protected]', function(chore, index, array) {
    return !chore.done;
  })
  remainingChores;
}

let hamster = new Hamster([
  { name: 'cook', done: true },
  { name: 'clean', done: true },
  { name: 'write more unit tests', done: false }
]);
hamster.remainingChores; // [{name: 'write more unit tests', done: false}]

set(hamster.chores[2], 'done', true);
hamster.remainingChores; // []

Finally, you can optionally pass an array of additional dependent keys as the second parameter to the macro, if your filter function relies on any external values:

import { filter } from '@ember/object/computed';

class Hamster {
  constructor(chores) {
    set(this, 'chores', chores);
  }

  doneKey = 'finished';

  @filter('chores', ['doneKey'], function(chore, index, array) {
    return !chore[this.doneKey];
  })
  remainingChores;
}

let hamster = new Hamster([
  { name: 'cook', finished: true },
  { name: 'clean', finished: true },
  { name: 'write more unit tests', finished: false }
]);

hamster.remainingChores; // [{name: 'write more unit tests', finished: false}]

© 2020 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://api.emberjs.com/ember/3.25/functions/@ember%2Fobject%2Fcomputed/filter