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/

Answer 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/