BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 7 - Formát JSON

V minulé lekci, Datová úložiště v JavaScriptu, jsme si popsali různá datová úložiště v JavaScriptu a rozdíly mezi nimi.

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
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Your page
localhost

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:

Your page
localhost

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:

Your page
localhost

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:

Your page
localhost

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


 

Předchozí článek
Datová úložiště v JavaScriptu
Všechny články v sekci
Objektově orientované programování v JavaScriptu
Článek pro vás napsal Šimon Raichl
Avatar
Jak se ti líbí článek?
6 hlasů
Autor se věnuje hlavně tvorbě všemožných věcí v JS
Aktivity (8)

 

 

Komentáře

Avatar
Jan Osuský
Člen
Avatar
Jan Osuský:7.3.2019 18:22

Ahoj, z jakého důvodu kód diáře neběží v prohlížeči Edge?

 
Odpovědět
7.3.2019 18:22
Avatar
Patrik Pastor:13.4.2019 13:26

Mam dotaz na pole zaznamy. Myslel sem si totiz, ze kdyz v konstruktoru je promenna "zaznamy" BUD localStorage NEBO pole (ternalni operator), jak to, ze ukladame do obou? (zaznamy.push(zaz­nam)), kdyz uz mame localStorage (po prvnim ulozenem zaznamu - tak sem to pochopil, jinak proc by tam jinai byla ta podminka). Prosim o vyvsvetleni jak to s tim polem zaznamy je, protoze z te podminky mi vychazi, za tam vlastne neni (coz nedava smysl kdyz v dalsim kode s nim pracujeme - viz ono "push"). Diky za odpoved

 
Odpovědět
13.4.2019 13:26
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Patrik Pastor
Jakub Podskalský:25.10.2019 19:20

Sice reaguji na komentář po půl roce a zřejmě Ti bude už k ničemu, ale odpovím, protože se tím učím sám. Snad je moje vysvětlení správné...
V tom konstruktoru ten JSON totiž jen načítáme, získáváme jeho obsah, a to jen jednou, kdy načteme stránku a vytvoří se instance diáře. A na tom druhém místě do něho naopak vkládáme data. Permanentně se tam přidá další. A když ty záznamy vypisujeme, tak už pracujeme s atributem zaznamy, do kterého jsme na začátku vycucli uložená data z JSONu po načtení + záznamy, které se tam přidaly už klasickým způsobem.

Editováno 25.10.2019 19:21
 
Odpovědět
25.10.2019 19:20
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Jan Osuský
Šimon Raichl:28.10.2019 7:23

Ahoj, predne se omlouvam, ze se ozyvam s takovym zpozdenim. Kazdopadne duvod je takovy, ze na lokalne nacteny soubory nelze v Edge pracovat s localStorage, protoze pokud se o to pokusis, tak ti to hodi 'Unspecified error'. Kazdopadne jednim z reseni je pouzit napr. XAMPP.

 
Odpovědět
28.10.2019 7:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.