# Sorting by multiple properties, depending filters

**URL:** <https://discuss.emberjs.com/t/sorting-by-multiple-properties-depending-filters/13045>\
**Category:** Design\
**Created:** [May 30, 2017, 8:19am UTC](https://discuss.emberjs.com/t/sorting-by-multiple-properties-depending-filters/13045 "2017-05-30T08:19:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![planetexpress69](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/planetexpress69/32/11530_2.png) [@planetexpress69](https://discuss.emberjs.com/u/planetexpress69)\
**Post date:** [May 30, 2017, 8:19am UTC](https://discuss.emberjs.com/t/sorting-by-multiple-properties-depending-filters/13045/1 "2017-05-30T08:19:14Z")

</div>

Hi there,

imagine a simple entity like `// simple entity const Item = Ember.Object.extend({ name: null, color: null, price: null });`

and a model hook like `model() { return { items: [Item.create({ name: 'Apple', color: 'red', price: 2 }), Item.create({ name: 'Orange', color: 'red', price: 3 }), Item.create({ name: 'Pear', color: 'yellow', price: 2 }), Item.create({ name: 'Grapes', color: 'green', price: 3 }), Item.create({ name: 'Banana', color: 'yellow', price: 2 }), Item.create({ name: 'Melon', color: 'green', price: 5 }), Item.create({ name: 'Strawberries', color: 'red', price: 7 }), Item.create({ name: 'Porsche 911 Cabrio S', color: 'silver', price: 20 }), Item.create({ name: 'FoldableBucket', color: 'black', price: 8 })] } },`

What is the best way to implement depending filter controls in the controller e.g. a list of checkboxes with colors and a range slider for prices. So that checking just ‘green’ and ‘red’ shrinks the price range slider from 2 to 7 and vice versa…

Thanks in advance, Martin

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [May 31, 2017, 1:54pm UTC](https://discuss.emberjs.com/t/sorting-by-multiple-properties-depending-filters/13045/2 "2017-05-31T13:54:55Z")

</div>

This isn’t necessarily elegant, but if it were me I’d just do something like:

```auto
// app/controllers/<name>.js
  ...
  filtered: Ember.computed.filter('model', function(item, index, array) {
    // filter by colors
    return this.get('colors').indexOf(item.get('color')) > -1;
  }),
  filteredPrices: Ember.computed.mapBy('filtered', 'price'),
  minPrice: Ember.computed.min('filteredPrices'),
  maxPrice: Ember.computed.max('filteredPrices'),
  ...

```

So you could use ‘minPrice’ and ‘maxPrice’ as the range of your slider, and filtered as the list of filtered items.

---

<div class="post-metadata">

**Author:** ![planetexpress69](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/planetexpress69/32/11530_2.png) [@planetexpress69](https://discuss.emberjs.com/u/planetexpress69)\
**Post date:** [May 31, 2017, 2:41pm UTC](https://discuss.emberjs.com/t/sorting-by-multiple-properties-depending-filters/13045/3 "2017-05-31T14:41:03Z")

</div>

Looks good to me! Which includes ‘elegant’ as well… Thank you!