How to filter an array/object by checking multiple values

Question

I'm playing around with arrays trying to understand them more since I tend to work with them alot lately. I got this case where I want to search an array and compare it's element values to another array which contains values of some selected filters.

For example if I select 3 filters, I want later to write matches in new array - only those which match all 3 filters.

For easier understanding I set up an example on http://jsfiddle.net/easwee/x8U4v/36/

Code is:

var workItems =   [     { "id": 2616, "category": ".category-copy .category-beauty .category-fashion"}, //this is a match     { "id": 1505, "category": ".category-beauty"}, // NOT     { "id": 1500, "category": ".category-beauty .category-fashion"}, // NOT     { "id": 692, "category": ".category-stills .category-retouching"}, // NOT     { "id": 593, "category": ".category-beauty .category-capture .category-fashion .category-product .category-stills .category-stills-retouching "}, // NOT     { "id": 636, "category": ".category-beauty .category-copy .category-fashion"}, //this is a match     { "id": 547, "category": ".category-fashion .category-lifestyle .category-stills .category-stills-retouching "}, // NOT     { "id": 588, "category": ".category-capture .category-recent-work .category-copy .category-beauty .category-fashion"} //this is a match ];  var filtersArray = [".category-beauty", ".category-fashion", ".category-copy"];  var i; for (i = 0; i < filtersArray.length; ++i) {     var searchString = filtersArray[i];     console.log('Searching for: ' + searchString);     var filtered = $(workItems).filter(function(){         return this.category.indexOf(searchString);     });     }    console.log('Filtered results: ' + JSON.stringify(filtered, null, 4)); 

I also tried with

filtered = $.grep(workItems, function(element, index){     return element.category.indexOf(filtersArray[i]);  }, true); 

but it matches only the first filter and only if it's at the begining of workItems.category

I've tried many different solutions but can't really make this work. What function should I use to return the desired result?

Answer 1

You can use .filter() method of the Array object:

var filtered = workItems.filter(function(element) {    // Create an array using `.split()` method    var cats = element.category.split(' ');     // Filter the returned array based on specified filters    // If the length of the returned filtered array is equal to    // length of the filters array the element should be returned      return cats.filter(function(cat) {        return filtersArray.indexOf(cat) > -1;    }).length === filtersArray.length; }); 

http://jsfiddle.net/6RBnB/

Some old browsers like IE8 doesn't support .filter() method of the Array object, if you are using jQuery you can use .filter() method of jQuery object.

jQuery version:

var filtered = $(workItems).filter(function(i, element) {    var cats = element.category.split(' ');      return $(cats).filter(function(_, cat) {        return $.inArray(cat, filtersArray) > -1;     }).length === filtersArray.length; });