MODUŁ 12

Tablice obiektów i wyszukiwanie danych

PPrezentacja dla nauczyciela

Większość aplikacji internetowych przetwarza zbiory danych: listy produktów, bazę pracowników czy katalog wycieczek. W tym module nauczysz się organizować informacje w tablice obiektów, precyzyjnie wyszukiwać rekordy po identyfikatorach oraz filtrować dane według wybranych kryteriów.

Struktura tablicy obiektów i odczyt właściwości

Tablica obiektów to jedna z najważniejszych struktur danych w języku JavaScript. Pozwala przechowywać powiązane zestawy informacji w uporządkowanej kolekcji, gdzie każdy element tablicy jest obiektem o określonych parach klucz-wartość:

const pracownicy = [
  { nazwisko: 'Marta Wiśniewska', dzial: 'Wsparcie techniczne', kontakt: 'marta@firma.pl' },
  { nazwisko: 'Tomasz Zieliński', dzial: 'Programista frontend', kontakt: 'tomasz@firma.pl' }
];

Dostęp do konkretnego obiektu uzyskujemy poprzez jego indeks w nawiasach kwadratowych (np. pracownicy[0]), a do jego poszczególnych pól odwołujemy się za pomocą notacji kropkowej: pracownicy[0].nazwisko lub nawiasów kwadratowych: pracownicy[0]['nazwisko'].

Dzięki powiązaniu indeksu lub identyfikatora z wartością kontrolki <select>, możemy natychmiast zaktualizować dane prezentowane na stronie po wybraniu nowej osoby z listy.

Tablica jest dynamiczna — może rosnąć w trakcie działania programu. Metoda push() dodaje nowy element na końcu tablicy i zwraca jej nową długość. Dzięki temu obiekt zbudowany z danych formularza można dopisać do kolekcji i od razu pokazać na stronie:

const nowy = { nazwisko: 'Anna Nowak', dzial: 'Księgowość', kontakt: 'anna@firma.pl' };
pracownicy.push(nowy);          // dopisanie na końcu
console.log(pracownicy.length); // 3 — liczba elementów rośnie

Liczbę elementów tablicy podaje właściwość length, a ostatni element usuwa pop(). Po każdej zmianie zawartości trzeba ponownie odświeżyć widok (np. wygenerować listę od nowa), bo strona nie aktualizuje się sama.

const pracownicy = [
  { nazwisko: 'Marta Wiśniewska', dzial: 'Wsparcie techniczne', kontakt: 'marta@firma.pl' },
  { nazwisko: 'Tomasz Zieliński', dzial: 'Programista frontend', kontakt: 'tomasz@firma.pl' }
];

function pokazSzczegolyPracownika() {
  const indeks = Number(document.getElementById('wybierzOsobe').value);
  const wybranaOsoba = pracownicy[indeks];

  document.getElementById('kartaNazwisko').innerHTML = 'Nazwisko: ' + wybranaOsoba.nazwisko;
  document.getElementById('kartaDzial').innerHTML = 'Dział: ' + wybranaOsoba.dzial;
  document.getElementById('kartaKontakt').innerHTML = 'Kontakt: ' + wybranaOsoba.kontakt;
}

1. W jaki sposób odczytać właściwość cena z pierwszego obiektu tablicy produkty?

Za pomocą zapisu produkty[0].cena Przez wywołanie produkty.get(0).cena Stosując odwołanie produkty{0}->cena Poprzez zapis produkty.first().price

2. Czym różni się odwołanie do właściwości obiektu obiekt.nazwa od zapisu obiekt['nazwa']?

Zapis z kropką działa tylko dla liczb, a z nawiasem kwadratowym wyłącznie dla tekstu Zapis z nawiasem kwadratowym pozwala na użycie zmiennej jako dynamicznej nazwy klucza Zapis z kropką jest wolniejszy, ponieważ wymaga każdorazowej alokacji pamięci na stercie Zapis z nawiasem kwadratowym tworzy nowy obiekt zamiast odczytywać istniejący klucz

3. Jaka właściwość tablicy zwraca całkowitą liczbę przechowywanych w niej obiektów?

Właściwość size Właściwość count Właściwość length Właściwość total

Wyszukiwanie rekordu za pomocą metody find

Metoda tablica.find() służy do odnalezienia pierwszego elementu w kolekcji, który spełnia zdefiniowany warunek logiczny. Przekazujemy do niej funkcję zwrotną (tzw. predykat), która zwraca true dla poszukiwanego rekordu:

const wynik = magazyn.find(item => item.kod === 'A10');

Jeżeli żaden obiekt w tablicy nie spełni kryteriów, metoda find() zwraca specjalną wartość undefined.

Zawsze należy sprawdzić wynik za pomocą instrukcji warunkowej: if (wynik) { ... } else { ... }. Bezpośrednia próba odczytania właściwości na niezabezpieczonym obiekcie (np. wynik.cena, gdy nic nie znaleziono) spowoduje błąd krytyczny skryptu TypeError.

const magazyn = [
  { kod: 'A10', nazwa: 'Klawiatura mechaniczna', cena: 249 },
  { kod: 'B20', nazwa: 'Mysz gamingowa', cena: 159 },
  { kod: 'C30', nazwa: 'Podkładka XXL', cena: 69 }
];

function wyszukajTowar() {
  const kod = document.getElementById('szukanyKod').value.trim().toUpperCase();
  const wynikTekst = document.getElementById('wynikWyszukiwania');

  const towar = magazyn.find(function(item) {
    return item.kod === kod;
  });

  if (towar) {
    wynikTekst.textContent = towar.nazwa + ' — cena: ' + towar.cena + ' zł';
    wynikTekst.style.color = '#16a34a';
  } else {
    wynikTekst.textContent = 'Brak w magazynie towaru o kodzie: ' + kod;
    wynikTekst.style.color = '#dc2626';
  }
}

4. Co zwraca metoda tablica.find(warunek), jeżeli żaden element tablicy nie spełnił kryterium?

Wartość logiczną false Pusty obiekt {} Liczbę -1 Wartość undefined

5. Jak zapisać funkcję wyszukującą w tablicy kursy obiekt o właściwości id równej 5?

Za pomocą zapisu kursy.find(k => k.id === 5) Poprzez wywołanie kursy.searchById(5) Stosując zapis kursy.filterEqual('id', 5) Za pomocą zapisu kursy.locateKey(5)

6. W jaki sposób zabezpieczyć skrypt przed błędem TypeError przy wyświetlaniu właściwości rekordu znalezionego metodą find?

Zdefiniować tablicę jako zmienną globalną typu const Sprawdzić instrukcją if (wynik), czy obiekt został znaleziony przed odczytem jego pól Wywołać funkcję alert przed każdą operacją wyszukiwania Przekonwertować całą tablicę na pojedynczy ciąg znaków String

Filtrowanie danych metodą filter i prezentacja

Gdy użytkownik chce zobaczyć nie jeden rekord, lecz podzbiór danych spełniający określone kryteria (np. wszystkie wycieczki do Grecji lub towary tańsze niż 100 zł), korzystamy z metody tablica.filter().

Metoda filter() iteruje po elementach i tworzy nową tablicę, zawierającą wyłącznie te obiekty, dla których funkcja testująca zwróciła wartość true. Oryginalna tablica źródłowa pozostaje nienaruszona.

Aby obsłużyć wariant „wszystkie kategorie”, stosujemy alternatywę logiczną: wybranaKategoria === 'wszystkie' || element.kraj === wybranaKategoria. Po odfiltrowaniu czyścimy kontener i generujemy listę pasujących pozycji.

const wycieczki = [
  { nazwa: 'Ateny i Akropol', kraj: 'Grecja', cena: 1890 },
  { nazwa: 'Rzym i Watykan', kraj: 'Włochy', cena: 2150 },
  { nazwa: 'Wyspa Zakynthos', kraj: 'Grecja', cena: 2400 },
  { nazwa: 'Barcelona i Costa Brava', kraj: 'Hiszpania', cena: 1990 }
];

function filtrujWycieczki() {
  const wybranyKraj = document.getElementById('filtrKategoria').value;
  const lista = document.getElementById('listaOfert');
  lista.innerHTML = '';

  const przefiltrowane = wycieczki.filter(function(w) {
    return wybranyKraj === 'wszystkie' || w.kraj === wybranyKraj;
  });

  przefiltrowane.forEach(function(w) {
    const li = document.createElement('li');
    li.innerHTML = '' + w.nazwa + ' (' + w.kraj + ') ' + w.cena + ' zł';
    lista.appendChild(li);
  });
}

7. Co zwraca wywołanie metody tablica.filter(funkcjaWarunkowa)?

Liczbę elementów, które spełniają podany warunek logiczny Pierwszy element spełniający warunek lub wartość null Nową tablicę zawierającą wszystkie elementy spełniające warunek Wartość logiczną true, jeśli przynajmniej jeden element pasuje

8. Co stanie się z oryginalną tablicą bazową po wywołaniu na niej metody filter()?

Wszystkie elementy niespełniające warunku zostaną z niej trwale usunięte Oryginalna tablica pozostanie całkowicie niezmieniona Tablica zostanie posortowana według kryterium filtrowania Zostanie automatycznie zresetowana do pustej kolekcji []

9. Jaki warunek w funkcji filtrującej pozwala zwrócić wszystkie elementy, gdy w kontrolce wybrano opcję 'wszystkie'?

Warunek kategoria === 'all' ? delete : keep Sprawdzenie if (kategoria === 'wszystkie') throw new Error() Zapis w postaci kategoria === 'wszystkie' ? [] : null Warunek kategoria === 'wszystkie' || element.kraj === kategoria

Tablice obiektów i wyszukiwanie danych

Struktura tablicy obiektów i odczyt właściwości

Wyszukiwanie rekordu za pomocą metody find

Filtrowanie danych metodą filter i prezentacja

Ćwiczenia