Как сделать фильтрацию элементов?

Question

[fgehte]

Всем привет) Нужна помощь) Есть чекбоксы, при нажатии на которые происходит фильтрация в зависимости от их значения, если выбрано несколько чекбоксов то и фильтроваться должно по обоим условиям

<form class="map__filters">
  <fieldset id="housing-features" class="map__features">
    <input type="checkbox" name="features" value="wifi" id="filter-wifi" class="map__checkbox">
    <label for="filter-wifi">Wi-Fi</label>

    <input type="checkbox" name="features" value="dishwasher" id="filter-dishwasher" class="map__checkbox">
    <label for="filter-dishwasher">Посудомоечная машина</label>

    <input type="checkbox" name="features" value="parking" id="filter-parking" class="map__checkbox">
    <label for="filter-parking">Парковка</label>

    <input type="checkbox" name="features" value="washer" id="filter-washer" class="map__checkbox">
    <label for="filter-washer">Стиральная машина</label>

    <input type="checkbox" name="features" value="elevator" id="filter-elevator" class="map__checkbox">
    <label for="filter-elevator">Лифт</label>
    <input type="checkbox" name="features" value="conditioner" id="filter-conditioner" class="map__checkbox">
    <label for="filter-conditioner">Кондиционер</label>
   </fieldset>
</form>

const data = [
  {
    "features": [
      "wifi",
      "parking",
      "washer",
      "elevator"
    ]
  },
  {
    "features": [
      "wifi",
      "dishwasher",
      "parking"
    ]
  },
  {
    "features": [
      "dishwasher",
      "parking",
      "washer",
      "elevator",
      "conditioner"
    ]
  }
];

const form = document.querySelector('.map__filters');

form.addEventListener('change', () => {
  const housingFeatures = document.querySelectorAll('#housing-features input:checked');
  console.log(housingFeatures)
});

Answer 1

[0xD34F]

<div id="items"></div>

document.querySelector('.map__filters').addEventListener('change', function() {
  const values = Array.from(
    this.querySelectorAll('.map__checkbox:checked'),
    n => n.value
  );

  const filtered = values.length
    ? data.filter(n => values.every(m => n.features.includes(m)))
    : [];

  document.querySelector('#items').innerHTML = filtered
    .map(n => `<div>${JSON.stringify(n, null, 2)}</div>`)
    .join('');
});

Answer 2

[Алексей]

Фильтруйте не dom элементы, а массив с данными, который прилетает от сервера, после фильтра отрендерите на странице

Comments

[fgehte]

можете привести решение?

[Алексей]

fgehte, Я же не вижу в каком формате данные у вас прилетают. По поводу фильтрации используйте метод filter

[fgehte]

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

[Алексей]

fgehte, это не массив данных, это куча dom элементов.
При отмеченных чекбоксах просто менять функцию колбэк в методе filter

[fgehte]

Алексей, В каком месте data это куча dom элементов?????? Для упрощения специально написал data с данными, которые нужны.