Úloha 4 – Filtrování a textový výstup z pole objektů

Úvod do úlohy

Řetězení metod (method chaining) je technika, která umožňuje skládat více operací nad polem do jednoho čitelného „potrubí“. Místo několika mezikroků si data nejprve vyfiltrujeme (filter()), pak je přetransformujeme (map()) a nakonec zformátujeme do textu (join()), případně do HTML seznamu. V praxi tak snadno vytvoříš výstupy typu „Seznam všech odjezdů po 15:00 ve formátu Linka – cíl (čas)“ bez ručního psaní cyklů a dočasných proměnných.

Teorie a principy

• Řetězení funguje díky tomu, že filter() a map() vrací nové pole, na kterém můžeš hned volat další metodu.

• Typické pořadí je filter().map().join():

  1. filter() – zmenší data na relevantní podmnožinu.

  2. map() – přetvoří prvky (např. objekt → řetězec).

  3. join() – spojí pole řetězců do jednoho textu s oddělovačem.

• Pořadí záleží: map().filter() často dělá zbytečnou práci navíc (nejdřív transformuješ vše, i to, co nakonec vyhodíš).

• Čitelnost: i když je řetězení krátké, vždy přidej komentář a udrž logiku srozumitelnou.

• Podmínky piš explicitně (např. if (spoje.length > 0 == true)) – pro začátečníky je to přehlednější (ekvivalent zkrácení: if (spoje.length > 0)).

Praktické příklady kódu

Pozor: v příkladech výše je záměrně použito porovnávání časů jako řetězců HH:MM. Aby fungovalo správně, dbej na dvě číslice u hodin i minut (např. "08:05" místo "8:5").

Typické chyby / záludnosti

• Zapomenuté return v callbacku u map()/filter() – bez něj se vrací undefined a řetězení selže.

• Záměna výsledných typů:

  • filter() a map() vrací pole, lze pokračovat map() nebo join().

  • find() vrací jeden objekt (nebo undefined), nejde na něj volat join().

• Nesprávné pořadí operací – map().filter() zbytečně zatěžuje běh (nejprve převeď vše, potom vyhoď část). Lepší je filter().map().

• Nevalidní formát času – "8:30" > "15:00" vrací true, což je špatně pro záměr. Použij "08:30".

• Chybné spojení při tvorbě HTML – join(", ") by v <ul> přidával čárky mezi <li>. Do HTML seznamu proto spojuj prázdným řetězcem "".

Shrnutí

• Řetězení metod dává čitelný „tok“ zpracování: filter() → map() → join().

• filter() zmenšuje data, map() je formátuje, join() z nich udělá finální text.

• Na jednotlivý prvek použij find() a teprve pak jej formátuj do textu.

• Dodržuj validní časový formát HH:MM a piš explicitní podmínky.

• Při tvorbě HTML seznamů zvol vhodný oddělovač v join() (pro <li> často "").

Úloha

Zadání (kontext úlohy):

Spravuješ jednoduchý přehled měření z několika teplotních senzorů v dílně. Z naměřených hodnot potřebuješ rychle vypsat jen ta měření, která překračují bezpečný limit, a převést je do čitelného textu nebo seznamu bez ručního psaní cyklů.

Cíl úlohy:

Procvičit si řetězení metod polí filter().map().join() pro vytvoření textového výstupu a HTML seznamu.

Vstupní podmínky:

• Student pracuje se soubory index.html a script.js.

• Budeme vypisovat pomocí document.write().

Požadovaný výstup:

1. Vytvoř pole mereni se 4–6 objekty, každý musí mít vlastnosti:

   • id (např. "A1"),

   • mistnost (např. "Sklad"),

   • teplota (číslo, např. 27).

2. Do proměnné limit ulož mezní teplotu (např. 25).

3. Pomocí řetězení vytvoř a vypiš jediný řetězec ve formátu:
   Senzor A1 – Sklad (27 °C), Senzor B2 – Dílna (29 °C), ...

   • Použij filter() pro výběr měření, kde teplota > limit.

   • Použij map() k převodu objektu na text "Senzor {id} – {mistnost} ({teplota} °C)".

   • Nakonec join(", ") pro spojení do jedné věty.

4. Vytvoř HTML seznam <ul> všech měření, která jsou do limitu včetně (tj. teplota <= limit), kde každá položka <li> bude ve tvaru:
   {mistnost}: {teplota} °C

   • Využij opět řetězení filter().map().join("") a obal výsledný řetězec do "<ul>" + ... + "</ul>".

5. Pokud po odfiltrování nadlimitních měření v kroku 3 žádná neexistují, vypiš větu:
   Žádná měření nad limitem.

   • Pro kontrolu použij délku pole po filter() a podmínku if (pocet > 0 == true) / if (pocet > 0 == false).

Doplňující pokyny:

• Používej const pro pole a objekty, let pro hodnoty, které budeš měnit.

• Nepoužívej šipkové funkce (=>). Piš klasicky function(...) { ... }.

• V podmínkách porovnávej explicitně (např. if (pocet > 0 == true)).

• Řetězení piš čitelně po řádcích a přidej krátký komentář k jednotlivým krokům.

Řešení úlohy

Co je zde splněno

• Vytvořeno pole mereni s 5 objekty (id, mistnost, teplota).

• Zavedena proměnná limit (= 25).

• Pomocí filter().map().join() vytvořen a vypsán jediný řetězec všech nadlimitních měření.

• Ošetřen případ „žádná měření nad limitem“ (výslovná kontrola přes if (pocetNad > 0 == true) / == false).

• Pomocí filter().map().join("") vygenerován HTML seznam <ul> všech měření do limitu včetně.

• Chaining je zapsán přehledně po řádcích a doplněn komentáři.

Poznámky

• push() ani unshift() zde nepotřebujeme – pracujeme s již připraveným polem a metodami pro jeho transformaci.

• Porovnání teplot jako čísel je v pořádku (v poli jsou čísla). Pokud by byly časy/teploty jako řetězce, dávejte pozor na formát.