Comment avoir plusieurs filtres sur un tableau JQuery

Question

J'ai actuellement du code pour filtrer un tableau en fonction de la fourchette de prix en utilisant un curseur. Je dois être en mesure d'ajouter des cases à cocher pour différentes tailles et couleurs afin que je puisse également filtrer en utilisant leurs valeurs. C'est le code que j'ai jusqu'à présent, mais je ne sais pas comment implémenter les cases à cocher afin d'avoir plusieurs façons de filtrer le tableau.

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

Merci à l'avance pour toute aide »

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

Answer 1

Utilisation $.grep au lieu de $.each et structurer le code comme ceci:

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

---

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

---

exemple plus complexe: http://jsfiddle.net/mattball/vZzjM/

Vous remarquerez peut-être que vous êtes encore obtenir un tableau vide en arrière, mais cela fait réellement sens. Étant donné les critères que vous avez spécifiés (minPrice = 201, maxPrice = 301, color = red or green, size = small) , il n'y a pas d'éléments de tableau correspondants.

les critères Desserrez prix juste un petit peu et vous verrez que tout fonctionne comme prévu: http://jsfiddle.net/mattball/MQ8Mc/