Фильтрация массива по нескольким условиям в Javascript - PullRequest
Новая
       20

Фильтрация массива по нескольким условиям в Javascript

1 голос
/ 22 апреля 2020

У меня есть массив объектов, соответствующих HTML элементам. Это карты, которые должны появляться / исчезать в зависимости от того, выполнено ли условие. Я преобразовал HTMLCollection в массив Javascript, чтобы на нем можно было использовать методы массива.

Я также использую теги HTML select для создания объекта javascript для использования в качестве фильтра. Мне нужно знать, как фильтровать мой массив по всем парам ключ / значение объекта. Сейчас мой код удовлетворяет только одному условию, самому последнему условию.

Вот это HTML: 

<label for="numProperties"></label>
<label for="location"></label>
<label for="retired"></label>

<select class="filter" id="numProperties" onchange="updateFilters(this.value)">
    <option value="none" selected disabled hidden>Choose Num Properties</option>
    <option value="all">All</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="filter" id="location" onchange="updateFilters(this.value)">
    <option value="none" selected disabled hidden>Choose Location</option>
    <option value="all">All Locations</option>
    <option value="New York">New York</option>
    <option value="New Jersey">New Jersey</option>
    <option value="Connecticut">Connecticut</option>
</select>

<select class="filter" id="retired" onchange="updateFilters(this.value)">
    <option value="none" selected disabled hidden>Choose If Retired</option>
    <option value="true">Yes</option>
    <option value="false">No</option>
</select>

Вот мое javascript: 

        function updateFilters(value) {
        var filters = document.getElementsByClassName('filter');
        var activeFilters = {};

        for (var i = filters.length - 1; i >= 0; i--) {
            if (filters[i].value != 'none' && filters[i].value != 'all') {
                activeFilters[filters[i].id] = filters[i].value;
            }
        }

            filterCards(activeFilters)
        }

        function filterCards(activeFilters) {
        var test = allCards.filter(function (card) {
            for (var key in activeFilters) {
                if (card.attributes[key].value === activeFilters[key]) {
                   card.style.display = 'inline-block' 
                } else {
                   card.style.display = 'none'
                }
            }
        })
    }

Как видите, мне нужно иметь возможность фильтровать любые / все условия. Люди с 2 свойствами, живущими в Нью-Йорке, которые на пенсии. Прямо сейчас мой фильтр работает только для самого последнего поиска. Например, если я выберу новое местоположение, мой массив покажет мне все в этом новом местоположении, даже если у объектов в этом массиве есть другое количество свойств или другое логическое значение для «удаленного».

1 Ответ

0 голосов
/ 22 апреля 2020

Вам нужен 'перерыв' внутри вашего для l oop, когда фильтр не соответствует: 

for (var key in activeFilters) {
  if (card.attributes[key].value === activeFilters[key]) {
    card.style.display = 'inline-block' 
  } else {
    card.style.display = 'none'
    break; // stop filtering this card
    }
}
...