Как иметь несколько фильтров в массиве JQuery

Question

В настоящее время у меня есть некоторый код для фильтрации массива по диапазону цен с помощью ползунка. Мне нужно иметь возможность добавлять флажки для различных размеров и цветов, чтобы я также мог фильтровать, используя их значения. Это код, который у меня есть, но я не уверен, как реализовать флажки, чтобы у меня было несколько способов фильтрации массива.

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

Заранее спасибо за любую помощь "

Скрипка http://jsfiddle.net/ltbmedia/86pEn/

Answer 1

Используйте $.grep вместо $.each и структурируйте код следующим образом:

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

---

Пример: http://jsfiddle.net/mattball/Rsbcu/

---

Более сложный пример: http://jsfiddle.net/mattball/vZzjM/

Вы можете заметить, что все еще возвращает пустой массив, но это действительно имеет смысл. С учетом указанных вами критериев (minPrice = 201, maxPrice = 301, color = red or green, size = small) нет соответствующих элементов массива.

Ослабьте ценовые критерии просто на крошечный бит, и вы увидите, что все работает как положено: http://jsfiddle.net/mattball/MQ8Mc/