Marcin Jaroszyński blog

JavaScript: Jak zresetować listę?

Opublikowano: 23.05.2024 - tagi: JavaScript Lista Opcja

Odznaczanie opcji z listy

Przykładowa lista wielokrotnego wyboru:

<label for="colour">What is your favourite colour?</label>
<br />
<select id="colour" name="colour" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="other">Other</option>
</select>
<br />
<button id="reset">Reset</button>

Jak zresetować listę do stanu początkowego po kliknięciu przycisku Reset?

Element: HTMLSelectElement posiada atrybut o nazwie: selectedIndex. Przechowuje indeks, który mówi, który element z listy jest zaznaczony (indeks jest liczony od 0).

Czyli jeśli posiada wartość 0 to znaczy, że pierwszy element z listy jest zaznaczony. Jeśli lista nie zawiera zaznaczonych elementów, to selectedIndex będzie mieć wartość: -1.

Żeby zresetować listę, wystarczy przypisać do selectedIndex wartość: -1:

const select = document.getElementById("colour");
const resetBtn = document.getElementById("reset");

resetBtn.addEventListener("click", () => {
  select.selectedIndex = -1;
});

JavaScript: Jak filtrować dane z dwóch zbiorów?

Opublikowano: 14.05.2024 - tagi: JavaScript Filtrowanie Dane Zbiór Tablica Obiekt

Filtrowanie danych — dwa zbiory

Załóżmy, że mamy następujące dwa zbiory danych:

const set1 = ['a', 'b', 'c', 'd'];
const set2 = ['a', 'e', 'f', 'd', 'g'];

I chcemy przefiltrować dane zbioru set2, w taki sposób, że pobieramy, tylko te elementy, które znajdują się, w zbiorze set1.

Potrzebujemy pobrać część wspólną zbiorów set1 i set2. Czyli wynik końcowy będzie taki:

const result = ['a', 'd'];

Te dane można pobrać za pomocą kombinacji funkcji filter i indexOf:

const result = set1.filter(item => set2.indexOf(item) > -1);

Metoda indexOf sprawdza, czy podana wartość znajduje się w tablicy. Jeśli "tak", zwróci indeks tej wartości. Jeśli "nie", zwróci wartość: -1. Dzięki temu można łatwo przefiltrować dane.

Filtrowanie tablicy obiektów

A jak przefiltrować dane po zbiorach składających się z tablicy obiektów:

const set1 = [{ id: 1, value: 'Some value 1' }, { id: 2, value: 'Some value 2' }, { id: 3, value: 'Some value 3' }, { id: 4, value: 'Some value 4' }];
const set2 = [1, 4];

Chcemy pobrać obiekty z tablicy set1 bazując na tablicy set2, która zawiera id tych obiektów.

Można te dane pobrać tak:

const result = set1.filter((itemSet1) => set2.some((itemSet2) => itemSet1.id === itemSet2));
console.log(result); // [{ id: 1, value: 'Some value 1' }, { id: 4, value: 'Some value 4' }]