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í v JavaScriptu 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 použijeme spolu s localStorage k ukládání záznamů našeho OOP diáře.

Příprava projektu

Pro účely zkoušení probírané látky si opět můžeme založit jednoduchou HTML stránku index.html a ve složce js/ jeden skript obsluha.js, do kterého budeme psát náš kód. V souboru index.html budeme mít pouze základní HTML strukturu a nalinkovaný skript obsluha.js:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="UTF-8">
    <title>Úložiště</title>
</head>
<body>
    <script src="js/obsluha.js"></script>
</body>
</html>

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. Jednoduchý JSON obsahující informace například o objektu nějakého uživatele vypadá například takto:

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

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

[
    {
        "jmeno": "Šimon",
        "vek": 19,
        "manzelka": null
    },
    {
        "jmeno": "David",
        "vek": 31,
        "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 formátu 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 řetězce, který pak můžeme do úložiště uložit. Přesně toto využití si dále v kurzu ukážeme na našem diáři.

API

Kromě XML je JSON také oblíbený formát pro takzvaná webová API, tedy aplikace, které běží někde na serveru a poskytují data. Naše aplikace se zeptá serveru na 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 tímto způsobem stahuje například 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.

Konfigurační soubory

V neposlední řadě je JSON oblíbeným formátem pro zápis různých konfiguračních souborů nejen ve webovém prostředí. I z tohoto důvodu je tedy dobré formát JSON znát, abychom byli schopní konfigurační soubory správně číst a upravovat.

JSON v JavaScriptu

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

class Uzivatel {
    jmeno;
    vek;

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

Instanci našeho uživatele vytvoříme následovně:

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

Když tuto instanci převedeme na JSON, získáme výsledek:

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

Objekt v JSONu je definován složenými závorkami. Každá vlastnost je uvedena názvem, za kterým následuje dvojtečka a hodnota. Řetězce v JSONu musí být uzavřeny v dvojitých uvozovkách. Jednotlivé vlastnosti jsou odděleny čárkou.

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

Nativní podpora JSONu

Obrovskou výhodou JSONu 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 JSONu:

Tvoje stránka

localhost

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

Podobné anonymní objekty můžeme 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í tříd.

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. Je důležité zdůraznit, že JSON 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ěme si vnořeného objektu reprezentujícího automobil. Manželku Šimon zatím nemá. Opět si všimněme chybějících čárek za posledními hodnotami v blocích.

Parsování JSONu

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

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

document.write(`${simon.jmeno}, ${simon.vek}`);

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

Tvoje stránka

localhost

Praktický příklad

V předchozím příkladu jsme viděli, jak použít JSON.parse() k přeměně JSON textu na JavaScriptový objekt. Nyní si ještě ukážeme realističtější příklad, který lépe demonstruje jeho praktické využití. Představme si, že naše aplikace obdrží data od serveru ve formě JSON textu. Tento scénář je velmi běžný při práci se zmíněnými webovými API. API může vrátit následující řetězec reprezentující seznam uživatelů:

const data = `[
    {"jmeno": "Šimon", "vek": 19},
    {"jmeno": "David", "vek": 31}
]`;

Tento řetězec obsahuje užitečná data, ale v tomto formátu s nimi nemůžeme v JavaScriptu přímo pracovat. Zde přichází na řadu metoda JSON.parse(), která nám umožní data "rozbalit" do užitečné formy:

const uzivatele = JSON.parse(data);

Nyní máme pole JavaScriptových objektů, s kterými můžeme pracovat stejně jako s jakýmikoliv jinými objekty v JavaScriptu. Můžeme například vypsat jen jména všech uživatelů:

for (const uzivatel of uzivatele) {
    document.write(uzivatel.jmeno);
}

Převod objektu do JSONu

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

class Uzivatel {
    jmeno;
    vek;

    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 JSONu opravdu nebude. Vytvořme instanci třídy Uzivatel a převeďme ji do JSON řetězce:

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

document.write(json);

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

Tvoje stránka

localhost

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

Formátovaný JSON

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říklad v elementu <pre>, abychom mezery viděli:

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

Můžeme vyzkoušet:

Tvoje stránka

localhost

Parametr `replacer`

Druhým parametrem metody JSON.stringify() je takzvaný replacer, kterým lze ovlivnit proces generování výsledného JSONu. Může jím být buď pole řetězců nebo čísel, anebo funkce. Jakákoliv jiná hodnota je ignorována.

Pole jako `replacer`

V případě předání pole se v JSONu zachovají pouze ty vlastnosti, jejichž názvy se nacházejí v daném poli. Zkusme si u našeho objektu zachovat pouze vlastnost jmeno:

const json = JSON.stringify(simon, ["jmeno"], 4);

Výsledek:

Tvoje stránka

localhost

Funkce jako `replacer`

Předáním funkce pak můžeme libovolně modifikovat hodnoty vlastností ve výsledném JSONu. Zkusme například zajistit, aby hodnota vlastnosti jmeno byla zapsána vždy velkými písmeny:

function replacer(nazev, hodnota) {
    if (nazev === "jmeno")
        return hodnota.toUpperCase();
    return hodnota;
}

const json = JSON.stringify(simon, replacer, 4);

Funkce přijímá dva parametry pro název vlastnosti a její hodnotu. Návratovou hodnotou je potom nová hodnota vlastnosti nebo hodnota undefined, pokud danou vlastnost chceme z JSONu vynechat.

Výsledek:

Tvoje stránka

localhost

Tím můžeme dnešní tutoriál uzavřít. Seznámili jsme se s klíčovými aspekty JSONu v JavaScriptu, včetně jeho struktury, parsování a generování.

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í.

Článek pro vás napsal Šimon Raichl

Uživatelské hodnocení:

286 hlasů

Autor se věnuje především vývoji v JavaScriptu

Aktivity

Nejčastěji vyhledáváné

Lekce 7 - Formát JSON

Příprava projektu

JSON

Využití JSON

Úložiště

API

Konfigurační soubory

JSON v JavaScriptu

Nativní podpora JSONu

Podporované datové typy

Parsování JSONu

Praktický příklad

Převod objektu do JSONu

Formátovaný JSON

Parametr replacer

Pole jako replacer

Funkce jako replacer

Parametr `replacer`

Pole jako `replacer`

Funkce jako `replacer`