Filter array controller with array - ember.js

Question

How can I filter the content in my array controller with an array?
I know I can do this for multiple filters:
App.ItemsController = Ember.ArrayController.extend({
filter: function() {
var content = this.get("content");
return content.filter(function(data) {
return (data.get("foo1")) &&
(data.get("foo2")) &&
(data.get("foo3"));
});
}
});
or with just one:
return content.filterBy("foo1");
But if I wanted to filter with an array how would I do that?
I imagine something like this:
var array = ["foo1", "foo2", "foo3"];
return content.filterBy(array);
But this obviously doesn't work.
I ask because I use up to 20 filters and it would be helpful if I could do it with an array.
If there is an "ember way" to do this that would help me a lot.

Answer 1

I'm not sure if I understood you correctly, but I'll give a try:
var filters = ["a", "b", "c"];
var array = [{a: 1, b: 2, c: 3}, {a: 2, b: 3}]
var result = array.filter(function(item) {
var isPresent = true;
filters.forEach(function(filter) {
if (!Ember.isPresent(item[filter])) {
isPresent = false;
}
});
return isPresent;
});
or if you use underscore or lodash:
var filters = ["a", "b", "c"];
var array = [{a: 1, b: 2, c: 3}, {a: 2, b: 3}]
var result = array.filter(function(item) {
return _.all(filters, function(filter) {
return Ember.isPresent(item[filter]);
});
});
and similarly if you want to use it with Ember structures, you can change item[filter] to item.get(filter).

Answer 2

If your filters are more complex than simple check for properties, you could create an array of functions and then check if every item passes:
App.IndexRoute = Ember.Route.extend
model: ->
[
Em.Object.create
color: 'red'
isReallyRed: false
Em.Object.create
color: 'red'
Em.Object.create
color: 'red'
isReallyRed: true
]
App.IndexController = Em.ArrayController.extend
init: ->
#_super()
Em.run.next #, 'filterContent'
filters: [
(item) ->
item.get('color') is 'red'
, (item) ->
item.get('isReallyRed')
]
filterContent: ->
filters = #get 'filters'
result = #filter (item) ->
pass = true
filters.forEach (filter) ->
if pass
pass = filter item
pass
#set 'content', result
Demo.

Answer 3

I decided to take some inspiration from andrusieczko and Daniels answer to filter it by object instead of array.
App.ItemsController = Ember.ArrayController.extend({
filterlist: {},
filters: function() {
var self = this;
var content = this;
var filterlist = this.get("filterlist");
var allfilters = ["a", "b", "c"];
// set filterlist if any
allfilters.forEach(function(filter){
if ( self.get(filter) ) {
var value = self.get(filter);
filterlist[filter] = value;
}
});
// if equal or higher return y. else n.
function equal(item, key) {
var data = item.get(key);
var thefilter = self.get(key);
if ( data >= thefilter ) {
return "y";
} else {
return "n";
}
};
filter = content.filter(function(item) {
var pass = "";
if ( jQuery.isEmptyObject(filterlist) ) {
return true;
} else {
$.each(filterlist, function(key, value){
var pass2 = pass;
return pass = pass2 + equal(item, key);
});
if ( pass.indexOf("n") === -1 ) {
return pass;
}
}
});
return filter;
}