Wstępny kod HTML

Na wstępie przygotowałem kod HTML formularza z przyciskami typu checkbox, które posłużą nam za bazę do stworzenia filtrów. Zawierają one kilka opcji, ważne jest, aby miały unikalne identyfikatory, po których będzie się odbywało filtrowanie danych na naszej stronie.

<form class="filters">
  <div class="filters__group">
    <div class="filters__title">Type</div>
    <ul class="filters__items">
      <li class="filters__item" data-filter="">
        <label for="filters_classic">
          <input id="filters_classic" type="checkbox" name="filterType[]" value="classic" />
          <span>classic</span>
        </label>
      </li>
      <li class="filters__item" data-filter="">
        <label for="filters_progress">
          <input id="filters_progress" type="checkbox" name="filterType[]" value="progress" />
          <span>progress</span>
        </label>
      </li>
      <li class="filters__item" data-filter="">
        <label for="filters_vintage">
          <input id="filters_vintage" type="checkbox" name="filterType[]" value="vintage" />
          <span>vintage</span>
        </label>
      </li>
      <li class="filters__item" data-filter="">
        <label for="filters_boho">
          <input id="filters_boho" type="checkbox" name="filterType[]" value="boho" />
          <span>boho</span>
        </label>
      </li>
      <li class="filters__item" data-filter="">
        <label for="filters_deluxe">
          <input id="filters_deluxe" type="checkbox" name="filterType[]" value="deluxe" />
          <span>deluxe</span>
        </label>
      </li>
    </ul>
  </div>
</form>

Na tak przygotowanym kodzie HTML będę bazował i wykonam dalszą część operacji na danych. Oczywiście filtry można dostosować do własnych potrzeb, jednak w tym przypadku powinny być w takim oto schemacie. Warto tutaj też zadbać o poprawne wyrównanie checkboxów względem tekstu, co jakiś czas temu opisywałem.

Przygotowanie danych

Mając już gotowy kod HTML, możemy przejść do jego obsługi w JavaScript. Rzecz jasna filtrowanie danych będzie przetwarzane w tle.

Zatem odczytajmy listę pól checkbox z formularza:

const data = document.querySelector(`.filters`);
data.querySelectorAll(`label`).forEach((label) => {
  label.querySelector(`input[type="checkbox"]`).addEventListener("change", (event) => {
    console.log(event);
  });
});

W powyższym kodzie przetwarzamy kolejno, wszystkie tagi label, następnie przechwytujemy event zmiany stanu każdego pola typu checkbox. W odpowiedzi uzyskamy event z konkretnymi informacjami o wybranym polu. Informacje, które będą nas za chwilę interesowały to value oraz checked.

Przetwarzanie danych

Przygotujmy sobie teraz metodę do przetwarzania naszego zbioru checkboxów.

function parseFormFilters(data) {
  return Object.keys(data).reduce((map, obj) => {
    map[data[obj].value] = data[obj].checked;
    return map;
  }, {});
}

Powyższa funkcja wykorzystuje metodę reduce() do przepisania obiektu formularza (konkretniej, pól formularza) do nowego obiektu w nowym schemacie. Nowy schemat oczywiście zawiera wcześniej wspomniane i potrzebne nam informacje o wartości i zaznaczeniu (true/false) danego pola. Całość będzie w formie przejrzystego obiektu, który z kolei posłuży do oczekiwanego przefiltrowania danych.

W tym miejscu możemy już zmodyfikować nasz mechanizm obsługi kliknięć w checkboxy:

data.querySelectorAll(`label`).forEach((label) => {
  label.querySelector(`input[type="checkbox"]`).addEventListener("change", (event) => {
    console.log("filters", parseFormFilters(data));
  });
});

Oto co otrzymamy w efekcie:

{
  "classic": true,
  "progress": false,
  "vintage": true,
  "boho": false,
  "deluxe": false
}

Zasada działania

W zasadzie mogłem zacząć od omówienia sposobu działania tego mechanizmu, jednak postanowiłem, że najpierw skupimy się na kodzie, który jest prosty.

Wybieramy formularz z filtrami za pomocą document.querySelector(`.filters`), w nim wybieramy wszystkie elementy label oraz zawarte w nich pola checkbox. Następnie odbieramy event zmiany stanu i uruchamiamy funkcję przetwarzającą cały formularz.

Wykorzystanie w praktyce

Powyższy skrypt można wykorzystać na wiele sposobów. Najprostszym byłoby przetwarzanie wynikowego obiektu na zasadzie pokazywania lub ukrywania produktów (elementów) na stronie. Innym sposobem może być przekazanie owego obiektu do dalszej obróbki w zewnętrznym pluginie filtrującym.

Podsumowanie

Jestem ciekaw waszych sposobów na filtrowanie danych i w jaki sposób je integrujecie z zestawem danych.