Filtern Sie ein Array nur in JavaScript, wenn eine bestimmte Auswahloption ausgewählt ist.

Question

Ich versuche, die Filterung innerhalb von React für ein Array von JSON zu aktivieren. Ich sortiere alphabetisch, dann muss ich nach Kategorie-Schlüssel filtern, wenn das Auswahl-Dropdown in diese Kategorie geändert wird (dies wird über das Filterargument des onChange-Ereignisses weitergegeben).

Dann mappe ich über das gefilterte Array und gebe das entsprechende HTML aus.

Mein Problem ist, wie überspringe ich im Wesentlichen den Filter, wenn die 'Alle' Option in der Auswahl Dropdown ausgewählt ist? Derzeit, wenn dies ausgewählt ist, werden keine Elemente an die Map übergeben und nichts wird gerendert.

Thanks :)

renderProduce(orderBy, filter) { 
    return this.fetchProduce() 
     .sort(function(a,b) { 
      return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0); 
     }) 
     .filter(function(item) { 
      if (filter != 'All') { 
       return item.category == filter; 
      } 
     }) 
     .map((item, i) => (
      <Item key={i} item={item} /> 
     )); 
} 

Answer 1

Sie können tun, dass immer, indem die filter Rückruf true zurück, wenn der 'All' Filter ausgewählt.

.filter(function(item) { 
     return filter === 'All' || item.category == filter 
    }) 

Answer 2

Array#filter erzeugt ein neues Array mit allen Elementen bestückt, für die die entsprechenden Iteration des Filters Rückruf true zurückgegeben. Derzeit, was Ihre Filteroperation zurückgibt, wenn 'All' ausgewählt ist undefined, die falsch ist. Rück true nach dem, wenn der Bedingung im Filter Rückruf:

.filter(function(item) { 
    if (filter != 'All') { 
     return item.category == filter; 
    } 
    return true; 
}) 

Answer 3

wenn filter === 'All', einfach filtern nicht

2. Platz: es sei denn, Sie mit dem Index Filter, Filterung sollte immer der erste Schritt sein. Weil der Rest jetzt auf einem möglicherweise kleineren Datensatz ausgeführt werden kann.

renderProduce(orderBy, filter) { 
    var arr = this.fetchProduce(); 
    return (filter === "All"? arr: arr.filter(item => item.category == filter)) 
     .sort((a,b) => a.name.localeCompare(b.name)) 
     .map((item, i) => (
      <Item key={i} item={item} /> 
     )) 
}