How to have multiple filter on an JQuery Array.

How to have multiple filter on an JQuery Array.

by Akram kamal

HTML

<!--color select-->   
Colors:
<label><input name="colorSelect" type="checkbox" value="red" checked="checked"/>red</label>
<label><input name="colorSelect" type="checkbox" value="brown" />brown</label>
<label><input name="colorSelect" type="checkbox" value="green" checked="checked"/>green</label>
<br/>
<!--size select-->
Sizes:
<label><input name="sizeSelect" type="checkbox" value="small" checked="checked" />small</label>
<label><input name="sizeSelect" type="checkbox" value="medium" />medium</label>
<label><input name="sizeSelect" type="checkbox" value="large" />large</label>

CSS

label {
    display: block;
}

JavaScript

// open your console

function getVal() {
    return $(this).val();
}

var minPrice = 201,
    maxPrice = 301,
    colors = $("input[name='colorSelect']:checked").map(getVal).get(),
    sizes = $("input[name='sizeSelect']:checked").map(getVal).get(),

    products = [{
        "price": "200",
        "color": "red",
        "size": "small"},
    {
        "price": "250",
        "color": "brown",
        "size": "medium"},
    {
        "price": "300",
        "color": "red",
        "size": "large"},
    {
        "price": "325",
        "color": "green",
        "size": "medium"},
    {
        "price": "250",
        "color": "green",
        "size": "large"},
    {
        "price": "275",
        "color": "brown",
        "size": "small"}],

    predicates = [
        function checkMinPrice(product)
        {
            return parseFloat(product.price) > minPrice;
        },
        function checkMaxPrice(product)
        {
            return parseFloat(product.price) < maxPrice;
        },
        function checkColor(product)
        {
            return $.inArray(product.color, colors) !== -1;
        },
        function checkSize(product)
        {
            return $.inArray(product.size, sizes) !== -1;
        }
    ],
    filteredProducts;

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

        return true;
    });
}

console.log($("input[name='colorSelect']:checked"));
console.log(filteredProducts, colors, sizes);