Lekce 7 - Formát JSON

V předchozím kvízu, Kvíz - Datové typy a datová úložiště v JavaScriptu, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V dnešním tutoriálu objektově orientovaného programování si představíme formát JSON. Ten je velmi populární i v dalších programovacích jazycích, i když původně vzešel z JavaScriptu. My jej příště použijeme spolu s localStorage k ukládání záznamů našeho OOP diáře.

JSON

JSON je zkratka z JavaScript Object Notation a zjednodušeně by se dalo říci, že JSON je javascriptový objekt zapsaný jako textový řetězec. JSON obsahující informace např. o objektu nějakého uživatele by mohl vypadat takto:

{
    "jmeno": "Šimon",
    "vek": 19,
    "dovednosti": ["programování", "grafika", "plavání"],
    "automobil": {
        "spz": "13ABC",
        "abs": true
    },
    "manzelka": null
}

V JSON můžeme ukládat i více objektů, jelikož podporuje pole. JSON obsahující 2 uživatele by tedy vypadal takto:

[
    {
        "jmeno": "Šimon",
        "vek": 19,
        "dovednosti": ["programování", "grafika", "plavání"],
        "automobil": {
            "spz": "13ABC",
            "abs": true
        },
        "manzelka": null
    },
    {
        "jmeno": "David",
        "vek": 31,
        "dovednosti": ["programování", "tanec"],
        "automobil": {
            "spz": "46DEF",
            "abs": true
        },
        "manzelka": null
    }
]

Využití JSON

JSON se využívá zejména pro ukládání dat nebo jako výměnný formát mezi různými systémy.

Úložiště

Objekty převedené do JSON můžeme jednoduše ukládat do souborů nebo jiných úložišť a poté je z nich zpětně načítat. Již jsme si zmínili localStorage, které umí ukládat jen text. Pomocí JSON převedeme hravě libovolně složitou strukturu do jediného stringu, který pak můžeme do úložiště uložit.

API

Kromě XML je JSON také oblíbený formát pro tzv. API. Naše aplikace se zeptá serveru na nějaká data a server jí je pošle právě jako objekty ve formátu JSON. Jedná se tedy o výměnný formát mezi různými systémy. Typicky si tak stahuje např. klient v JavaScriptu data ze serveru v PHP, protože formátu JSON oba programovací jazyky rozumí a mohou si tak snadno vyměňovat data.

JSON v JavaScriptu

Představme si, že máme nějakou instanci, např. konkrétního uživatele se jménem a věkem. Jeho třída by mohla vypadat např. takto:

class Uzivatel {

    constructor(jmeno, vek) {
        this.jmeno = jmeno;
        this.vek = vek;
    }

}

Instanci uživatele bychom vytvořili např. takto:

const simon = new Uzivatel("Šimon", 19);

Pokud bychom tuto instanci převedli na JSON, vypadal by následovně:

{
    "jmeno": "Šimon",
    "vek": 19
}

Objekt se v JSON definuje složenými závorkami. Následuje název vlastností, poté dvojtečka a jejich hodnota.

Za poslední hodnotou v bloku se nepíše čárka. Některé JS enginy s ní totiž mohou mít problém.

Nativní podpora JSON

Obrovskou výhodou JSON je, že je přímo součástí jazyka JavaScript. Nepotřebujeme tedy žádné knihovny a jakmile data z JSONu otevřeme, máme je k dispozici rovnou jako objekty.

Pokud JSON výše tedy uložíme do proměnné, bude v ní opravdu objekt s vlastnostmi jmeno a vek. Zkusme si to:

const simon = {
    "jmeno": "Šimon",
    "vek": 19
};
document.write(`${simon.jmeno}, ${simon.vek}`);

Skript do stránky opravdu vypíše data z JSON:

Nejedná se ovšem o instanci třídy Uzivatel, JSON objekty jsou totiž tzv. anonymní objekty.

Podobné anonymní objekty můžete občas v JavaScriptu potkat, používají se na místech, kde by se z nějakého důvodu nevyplatilo deklarovat plnohodnotnou třídu. Metody se jim dají poté i dále dodat v JavaScript kódu, nikdy ale přímo v JSON souborech. Určitě bychom anonymní objekty neměli používat namísto standardních instancí.

Podporované datové typy

Formát JSON nepodporuje metody objektů a u vlastností podporuje pouze následující datové typy:

• string,
• number,
• object,
• boolean,
• null a
• array.

Jedná se tedy pouze o data, nikoli o objekty obsahující jakoukoli logiku. JSON bohužel vůbec nepodporuje komentáře.

Ukažme si ještě jeden složitější JSON, ve kterém využijeme vnořené objekty a pole:

{
    "jmeno": "Šimon",
    "vek": 19,
    "dovednosti": ["programování", "grafika", "plavání"],
    "automobil": {
        "spz": "13ABC",
        "abs": true
    },
    "manzelka": null
}

JSON výše definuje kromě jména a věku uživatele také jeho dovednosti, automobil a manželku. Jedná se stále o definici dat jedné konkrétní instance. Pole zapisujeme na rozdíl od objektů do hranatých závorek. Všimněte si vnořeného objektu reprezentujícího automobil. Manželku Šimon zatím nemá. Opět si všimněte chybějících čárek za posledními hodnotami v blocích.

Parsování JSON

JSON ovšem často nezískáme takto hezky zapsaný v JS souboru, ale přijde nám v textovém řetězci. Takový JSON načteme pomocí metody JSON.parse(). Ukažme si příklad s uživatelem, kdy JSON již zapíšeme jen jako text:

const simon = JSON.parse(`{
    "jmeno": "Šimon",
    "vek": 19
}`);
document.write(`${simon.jmeno}, ${simon.vek}`);

Výstup je opět stejný jako v minulé ukázce:

Převod objektu do JSON

A jak naopak převedeme nějaký náš objekt do JSON stringu? K tomu slouží metoda JSON.stringify(). V kódu použijeme následující třídu Uzivatel:

class Uzivatel {

    constructor(jmeno, vek) {
        this.jmeno = jmeno;
        this.vek = vek;
    }

    pozdrav() {
        alert("Ahoj!");
    }

}

Metodu pozdrav() jsme do třídy výše přidali proto, abychom si ověřili, že v JSON opravdu nebude. Vytvořme instanci třídy Uzivatel a převeďme ji do JSON stringu:

const simon = new Uzivatel("Šimon", 19);
const json = JSON.stringify(simon);

document.write(json);

Náš objekt se vypíše jako JSON:

Vidíme, že zde není informace z jaké třídy byl uživatel vytvořen a také zde chybí veškerá jeho logika.

Kód je na jedné řádce, protože ve výchozím chování JSON.stringify() šetří místem a bílé znaky do výsledného řetězce nevkládá. Toto chování můžeme změnit zavoláním metody s parametry:

JSON.stringify(simon, null, 4);

Číslo 4 je počet mezer. Výpis je poté potřeba zobrazit např. v elementu <pre>, abychom mezery viděli:

document.write(`<pre>${json}</pre>`);

Můžeme vyzkoušet:

V příští lekci, OOP diář v JavaScriptu - Ukládání, řazení, seskupování, si vyzkoušíme localStorage a JSON na našem OOP diáři. Přidáme do něj ukládání, řazení a seskupování.