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?

Ram · Accepted Answer · 2013-09-10 13:19:57Z

24

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;
});

edited Sep 10, 2013 at 13:19

answered Sep 10, 2013 at 13:02

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

frogatto Over a year ago

Array.prototype.filter needs ECMAScript 5 support and only is available on modern browsers, i think for these basic works our own written functions is better, Aside from this, it's a cross-browser solution

Yury Tarabanko Over a year ago

Cool, the last line could be simplified using Array.prototype.every. Like this: return filtersArray.every(function(cat) { return ~cats.indexOf(cat); })

easwee Over a year ago

I'm using jQuery - so I guess this solution will work. Atleast it matched any tests I sent in and IE8 is not really a problem in this case since this is mostly practice work. Thanks a lot for help!

Ram Over a year ago

@ABFORCE Well, if you really care about cross-browser issues, you should know that IE8 doesn't support indexOf method of array object, the only browser that makes problem is IE, most previous versions of other browsers support most of the ECMAScript 5 methods, even Firefox v1, btw your answer doesn't solve the issue.

Maria Blair Over a year ago

Amazing way to filter multiple arrays for multiple values! Exactly what I needed -- thanks!

Owen Kelvin · Accepted Answer · 2020-10-28 11:01:02Z

18

You can use .filter() with boolean operators ie &&:

     var find = my_array.filter(function(result) {
       return result.param1 === "srting1" && result.param2 === 'string2';
     });
     
     return find[0];

edited Oct 28, 2020 at 11:01

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

answered Jun 25, 2018 at 11:59

aabiro

4,3363 gold badges27 silver badges36 bronze badges

Comments

jgatjens · Accepted Answer · 2021-08-14 21:27:09Z

6

The best way would be to have an array of values to search and then loop the data.

const ids = [1,2,3];
const products = DATA.filter((item) => ids?.includes(item.id));

answered Aug 14, 2021 at 21:27

jgatjens

6861 gold badge9 silver badges17 bronze badges

2 Comments

TopMarx Over a year ago

I'd not seen ?.includes() before, very elegant.

jgatjens Over a year ago

@TopMarx typescript sorry hehe

msayubi76 · Accepted Answer · 2021-05-21 10:41:26Z

0

this trick will help if anyone want to apply filter on the base of more than of property of object.

searchCustomers(){
        let tempCustomers = this.customers
        if (this.searchValue != '' && this.searchValue) {
        
        tempCustomers = tempCustomers.filter((item) => {
          

          return item.name
            .toUpperCase()
            .includes(this.searchValue.toUpperCase()) || item.customer_no
            .toUpperCase()
            .includes(this.searchValue.toUpperCase()) || item.mobno
            .toUpperCase()
            .includes(this.searchValue.toUpperCase()) 
        })
      }
      return tempCustomers;
  }

answered May 21, 2021 at 10:41

msayubi76

1,7181 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to filter an array/object by checking multiple values

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related