Question

185

How to filter an array/object by checking multiple values

rated 0 times [ 189] [ 4] / answers: 1 / hits: 134004 / 11 Years ago, tue, september 10, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

triston

Add To Favorites

Follow

Total Points: 545

Total Questions: 88

Total Answers: 94

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

answered 11 Years ago susanajamiep · Accepted Answer

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;

});