How to have multiple filter on an JQuery Array

Question

I currently have some code to filter an array based on price range using a slider. I need to be able to add checkboxes for various sizes and colors so that I can also filter using their values. This is the code I have so far but am unsure how to implement checkboxes so that I have have multiple ways of filtering the array.

//this is the main generated array
    var product = [{"price":"200","color":"red","size":"small"},
                   {"price":"250","color":"brown","size":"medium"},
                   {"price":"300","color":"red","size":"large"}];

// array to display filtered array
    var filteredProducts = [];  
    var key = 0;

//start of price range filter
    if(!minPrice && !maxPrice){
       filteredProducts = products;
    } else{
       $.each(products, function(i, object) {   
           var curentPrice = parseFloat(object.price); 
           var priceMinOk = true;
           var priceMaxOk = true;
       // filter results match the price range
           if(maxPrice || minPrice){
              if(maxPrice && maxPrice<curentPrice){
                 priceMaxOk = false;
              }
              if(minPrice && minPrice>curentPrice){
                 priceMinOk = false;
              }
           }  
       //  loop over list and get only related to new array
           if( priceMinOk && priceMaxOk ){  
              filteredProducts[key] = object;                  
              key++;
           }  
       });
    }

Thanks in advance for any help"

Fiddle http://jsfiddle.net/ltbmedia/86pEn/

Matt Ball · Accepted Answer · 2011-08-17 18:33:28Z

1

Use $.grep instead of $.each, and structure the code like this:

var products = [ /* ... */ ],
    predicates = [
        function predicate1(obj) { /* ... */ },
        function predicate2(obj) { /* ... */ },
        // ... ,
        function predicateN(obj) { /* ... */ }
    ],
    filteredProducts;

filteredProducts = $.grep(products, function (element, index)
{
    for (var i=0; i<predicates.length; i++)
    {
        if (!predicates[i](element)) return false;
    }

    return true;
});

Example: http://jsfiddle.net/mattball/Rsbcu/

More complex example: http://jsfiddle.net/mattball/vZzjM/

You might notice that you're still getting an empty array back, but this actually makes sense. Given the criteria you've specified (minPrice = 201, maxPrice = 301, color = red or green, size = small) there are no matching array elements.

Loosen up the price criteria just a tiny bit and you'll see that everything works as expected: http://jsfiddle.net/mattball/MQ8Mc/

edited Aug 17, 2011 at 18:33

answered Aug 16, 2011 at 21:47

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

8 Comments

dbach Over a year ago

Thanks Matt, I am assuming that each 'function predicate1(obj) { /* ... */ } is for each filter element (ie size), is that right?

Matt Ball Over a year ago

That's right. Each predicate would test for a separate condition on each element. In the example code in your question, you'd use two predicates, one to test the min price condition, and one to test the max price condition. BTW, a predicate is a function which returns a boolean value.

dbach Over a year ago

Thanks again but not sure I quite know what you mean. How would a predictate function test for a specific element value, sorry, been banging my head against the wall all day on this one!

dbach Over a year ago

Hi Matt, thanks for that and I think it cleared things up a bit! Would it be possible for you to look at my edit and see where I am going wrong, getting an empty array now and can I use multiple checkboxes with this method? Thanks...

Matt Ball Over a year ago

For starters, you're trying to parseFloat colors and sizes, which just won't work...

|

Collectives™ on Stack Overflow

How to have multiple filter on an JQuery Array

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related