W budowie
JavaScript w przeglądarce · Moduł 12

Tablice obiektów i wyszukiwanie danych

Przechowywanie danych w tablicach obiektów, odczyt właściwości, wyszukiwanie rekordów za pomocą metody find oraz filtrowanie ofert metodą filter.

  • 45 min
  • 16 slajdów
  • Notatki nauczyciela: N
  • Strona modułu: otwórz
Plan · 45 min

Co dziś robimy

  1. 12 minStruktura tablicy obiektów i odczyt właściwości Dostęp do konkretnego obiektu uzyskujemy poprzez jego indeks w nawiasach kwadratowych (np.
  2. 12 minWyszukiwanie rekordu za pomocą metody find Jeżeli żaden obiekt w tablicy nie spełni kryteriów, metoda find() zwraca specjalną…
  3. 12 minFiltrowanie danych metodą filter i prezentacja Metoda filter() iteruje po elementach i tworzy nową tablicę , zawierającą wyłącznie te…
  4. 4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
  5. 5 minPodsumowanie bilet wyjściowy i zadanie domowe
Atom 1 z 3 · ~12 min

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ść:

  • 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…
  • Tablica jest dynamiczna — może rosnąć w trakcie działania programu.
Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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;
}
Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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;
}
Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

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

Atom 2 z 3 · ~12 min

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:

  • 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) { ...
Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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';
  }
}
Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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';
  }
}
Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

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

Atom 3 z 3 · ~12 min

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.
Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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);
  });
}
Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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);
  });
}
Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

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

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

  • Dostęp do konkretnego obiektu uzyskujemy poprzez jego indeks w nawiasach kwadratowych (np.
  • Zawsze należy sprawdzić wynik za pomocą instrukcji warunkowej: if (wynik) { ...
  • 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 .
Bilet wyjściowy: Jaki warunek w funkcji filtrującej pozwala zwrócić wszystkie elementy, gdy w kontrolce wybrano opcję 'wszystkie'?
Odpowiedź: d) Warunek kategoria === 'wszystkie' || element.kraj === kategoria
Hyżyk· Tablice obiektów i wyszukiwanie danych moduł 1 / 1