Položky ze souboru

Zatím jsou počáteční položky napsané přímo ve script.js. Aplikace ale svá data obvykle drží odděleně od kódu, v souboru nebo na serveru, a načtou si je, když se stránka otevře. Totéž teď bude dělat i váš seznam. Jeho počáteční položky jsou v souboru polozky.json na třetí záložce editoru. Jsou to ty z pole a navíc káva, abyste poznali, že seznam přišel ze souboru.

Jak soubor načíst, víte z lekce o datech ze serveru. Funkce fetch() o něj požádá a odpověď přijde až za chvíli, takže na ni funkce označená async počká pomocí await. Vlastnost odpoved.ok řekne, jestli se soubor našel, a await odpoved.json() převede jeho JSON na pole objektů, stejné jako to v polozky:

async function nactiPolozky() {
    const odpoved = await fetch("polozky.json");
    polozky = await odpoved.json();
    zobrazPolozky();
}

Funkce vkládá do polozky nové pole, jenže konstanta novou hodnotu dostat nemůže. Vytvořte proto polozky teď pomocí let, a to jako prázdné pole, [], protože dokud soubor nepřijde, je seznam prázdný.

Proč nactiPolozky() volá zobrazPolozky() sama? Protože položky jsou k dispozici až za await. Kód za nactiPolozky(); na konci skriptu se provede hned, dřív, než soubor přijde, takže zobrazPolozky() by tam zobrazila prázdný seznam.

Načítání chvíli trvá: v náhledu třetinu sekundy, na pomalém připojení klidně několik sekund. Dobrá aplikace mezitím ukáže, co se děje. A když se soubor načíst nepodaří, řekne to, místo aby jen zobrazila prázdný seznam.

Typické chyby:

• Ponechané const polozky. Konzole pak ukáže TypeError: Assignment to constant variable.
• Zapomenuté await před odpoved.json(). V polozky pak místo pole bude objekt Promise a zobrazPolozky() skončí chybou TypeError: polozky is not iterable.