Stránka vykreslená z dat

Načtená data jsou obvykle pole objektů a stránka je ukáže tak, jak to znáte z lekce o webových stránkách: funkce vyprázdní seznam a v cyklu vytvoří prvky pro jednotlivé položky. Nové je jen to, odkud se pole vezme. Mějte ho v proměnné mimo funkce, aby šla stránka vykreslit znovu, kdykoli uživatel něco změní, a to bez dalšího dotazu na server:

let knihy = [];

function zobrazKnihy() {
    seznamKnih.textContent = "";
    const dostupne = knihy.filter((kniha) => kniha.dostupna);
    for (const kniha of dostupne) {
        const polozka = document.createElement("li");
        const nazev = document.createElement("h2");
        nazev.textContent = kniha.nazev;
        const autor = document.createElement("p");
        autor.textContent = kniha.autor;
        polozka.append(nazev, autor);
        seznamKnih.append(polozka);
    }
}

async function nactiKnihy() {
    const odpoved = await fetch("knihy.json");
    knihy = await odpoved.json();
    zobrazKnihy();
}

nactiKnihy();

Čeho si všimnout:

• knihy jsou mimo funkce, vytvořené pomocí let s prázdným polem. nactiKnihy() do nich uloží načtené pole a zobrazKnihy() z nich vykreslí stránku. Jakmile data dorazí, může je použít i kterákoli jiná funkce.
• filter() vrací nové pole a knihy nechá, jak jsou, takže při dalším vykreslení jsou tam zase všechny knihy. I ostatní metody polí, třeba sort(), find() a map(), fungují na načtených datech stejně jako na jakémkoli jiném poli.
• Každá položka má uvnitř další prvky: nadpis a odstavec. I ty vytvořte pomocí createElement() a do položky je vložte pomocí append(), které umí vložit několik prvků najednou.

Když uživatel na stránce něco vybere, obsluha události jen znovu zavolá zobrazKnihy(). Funkce si přečte, co je vybrané, a vykreslí seznam nanovo. Server se znovu neptá: data už jsou v poli.