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' }]

W kwietniu opublikowałem 1 wpis:

MySQL:

1. Jak wyświetlić zapytanie tworzące widok?

Przeczytałem 1 książkę:

1. Kiedy byliśmy sierotami — Kazuo Ishiguro

Przesłuchałem 3 audiobooków:

1. Pan Lodowego Ogrodu. Tom 2 — Jarosław Grzędowicz
2. Czas porzucenia — Elena Ferrante
3. Turniej cieni — Elżbieta Cherezińska

Kod widoku

Aby wyświetlić zapytanie widoku, zaloguj się do MySQL i wywołaj komendę:

show create view nazwa-widoku

W marcu opublikowałem 4 wpisy:

JavaScript:

1. Jak pobrać wartość dziesiętną z liczby?
2. Jak pobrać zaznaczone opcje z listy?
3. Jak dodać opcję do listy?

Narysowałem 1 komiks:

1. Refactoring

Przeczytałem 2 książki:

1. FUTU.RE — Dmitry Glukhovsky
2. Mężczyźni bez kobiet — Haruki Murakami

Przesłuchałem 8 audiobooków:

1. Różaniec — Rafał Kosik
2. Oko jelenia. Sfera Armilarna — Andrzej Pilipiuk
3. Oko jelenia. Sowie zwierciadło — Andrzej Pilipiuk
4. Pompeje — Robert Harris
5. Konklawe — Robert Harris
6. Wiek zła — Deepti Kapoor
7. Ziemiomorze. Grobowce Atuanu — Ursula K. Le Guin
8. Rebeka — Daphne Du Maurier

Dodawanie opcji do listy

Opcję do listy w JavaScript można dodać na kilka sposobów.

Zakładam, że lista jest już stworzona:

<select id="myList"></select>

W tym wpisie opiszę dwa sposoby:

Sposób 1: createElement

const option = document.createElement('option');
option.text = 'Option 1';
option.value = '1';

const select = document.getElementById('myList');
select.add(option);

Sposób 2: Option

const option = new Option('Option 1', '1');

const select = document.getElementById('myList');
select.add(option);

Dodatkowo Option umożliwia zaznaczenie danej opcji jako domyślną.

Konstruktor wygląda tak:

Option(text, value, defaultSelected, selected)

Pierwsze dwa parametry to odpowiednio: etykieta opcji i jej wartość.

Trzeci parametr: defaultSelected jeśli jest ustawiony na true sprawi, że nada określonej opcji atrybut: selected.

Przykład:

new Option('Option 1', '1', true)

Stworzy:

<option value="1" selected="">Option 1</option>

Ale uwaga! Ta opcja nie będzie domyślnie zaznaczona.

Jeśli chcesz zaznaczyć jakąś opcję, musisz przekazać true do czwartego parametru:

new Option('Option 1', '1', false, true)