Tutoriál o práci s JSON v JavaScripte

Úvod

Existuje mnoho spôsobov, ako sa dá JSON použiť v JavaScripte. Jedným z jeho najzákladnejších použití je ukladanie dát. Môžete ho použiť aj na prenos dát medzi klientmi, medzi servermi alebo zo servera na klienta. Medzi ďalšie užitočné aplikácie patrí možnosť konfigurovať a overovať dáta, ako aj generovať dátové štruktúry.

V tomto návode preskúmame, ako môžete použiť JSON vo svojich programoch v JavaScripte. Ak máte predchádzajúce skúsenosti s programovaním v JavaScripte, malo by to byť pre vás jednoduché.

Čo je JSON?

JSON je skratka pre JavaScript Object Notation. Je to formát navrhnutý tak, aby umožňoval zdieľanie rôznych typov dát. JSON využíva hlavne JavaScript ako svoj primárny programovací jazyk. Funguje aj s inými jazykmi ako Python, PHP, Ruby, ako aj Java. Je ľahko čitateľný, mimoriadne ľahký a nevyžaduje veľa formátovania. So všeobecnou syntaxou a štruktúrou tohto formátu sa môžete oboznámiť v našom návode: Prehľad formátu zdieľania dát JSON.

JSON sa môže použiť samostatne alebo môže byť definovaný v inom formáte súboru. Keď je samostatný, používa príponu .json. Keď je v inom formáte, zobrazuje sa buď ako reťazec JSON v úvodzovkách, alebo ako objekt priradený k premennej. JSON sa môže použiť napríklad aj vo formáte .html. Tento formát vám umožňuje relatívne jednoducho vykonávať prenos dát medzi serverom a prehliadačom.

Formát JSON je textový. Dáta vo forme kľúč-hodnota sa nachádzajú v zložených zátvorkách. Tu je príklad, ako vyzerá typický súbor .json looks like:

Ak máte objekt JSON v súbore .js alebo .html, zobrazí sa ako premenná takto:

V niektorých prípadoch ich môžete vidieť všetky v jednom riadku. To sa stáva vtedy, keď sa JSON v súbore JavaScript vykresľuje ako reťazec namiesto objektu:

Objekty JSON môžete previesť na reťazce. To je užitočné, keď chcete vykonať rýchly prenos dát.

JSON vs. objekt JavaScriptu

Ako sme spomínali, JSON funguje s akýmkoľvek programovacím jazykom. S objektmi JavaScriptu však môžete pracovať iba pomocou JavaScriptu. Syntax v JSON a JavaScripte je podobná. Rozdiel je v tom, že objekty JavaScriptu sa namiesto úvodzoviek zobrazujú v reťazcoch. Okrem toho môžu objekty JavaScriptu používať ako hodnoty funkcie, čo znamená, že sú menej obmedzené.

V nasledujúcom príklade uvádzame možnosť JavaScriptu pre používateľa. Používateľ je Sammy Shark a momentálne je online:

Ako vidíte, okolo žiadnych kľúčov ako first_name, last_name, online alebo full_name nie sú úvodzovky. Na poslednom riadku je tiež umiestnená hodnota funkcie. Ak chcete získať prístup k dátam vo forme reťazca, môžete zavolať user.first_name pomocou bodkovej notácie. Ak namiesto toho chcete celé meno, použijete user.full_name(), keďže ide o funkciu.

Ako pristupovať k dátam JSON

Ako sme spomenuli v predchádzajúcej časti, k dátam JSON môžete v JavaScripte pristupovať pomocou bodkovej notácie. Vezmime si príklad objektu JSON s názvom sammy:

Naša bodková notácia na prístup k hodnotám bude:

Ako prvá ide premenná. Za ňu umiestnime bodku. Nakoniec uvedieme kľúč, ku ktorému chceme pristupovať.

Povedzme, že chceme v JavaScripte vytvoriť upozornenie (alert), ktoré zobrazuje hodnotu first_name kľúča. Aby sa zobrazilo vo vyskakovacom okne, použijeme JavaScript funkciu alert() takto:

Ďalším spôsobom prístupu k údajom z JSON je použitie syntaxe s hranatými zátvorkami. Kľúč by mal byť umiestnený v dvojitých úvodzovkách vo vnútri hranatých zátvoriek. Tu je pokračovanie predchádzajúceho príkladu:

Čo ak pracujete s vnorenými prvkami poľa? V tomto prípade musíte volať index položky v poli. Vezmite si nasledujúci príklad:

Povedzme, že chceme získať prístup k reťazcu facebook. Tu je návod, ako použijeme bodkovú notáciu na prístup k tejto položke v poli pomocou jej indexu:

Nezabudnite pridať ďalšiu bodku pre každý vnorený prvok.

Funkcie používané s JSON

Ďalej sa pozrieme na niekoľko funkcií, ktoré môžete použiť s JSON. Prenos a ukladanie dát sa stáva pomerne jednoduchým, keď môžete previesť JSON z objektu na reťazec alebo z reťazca na objekt. Preskúmame, ako môžete previesť JSON na reťazec (stringify) a analyzovať ho (parse) dvoma rôznymi spôsobmi:

• JSON.stringify()

Reťazce sú lepšie na použitie, keď sa snažíte prenášať dáta odľahčeným spôsobom. Preto sa používajú na ukladanie a prenos dát z klienta na server. Zvážte nasledujúci príklad. Povedzme, že zhromažďujete dáta o nastaveniach používateľa na jednom počítači. Tieto informácie musíte odoslať na váš server. Na tento účel by ste použili reťazec. Potom ich môžete previesť späť pomocou JSON.parse() na ich čítanie a prácu s nimi.

Funkcia, ktorú tu vyzdvihneme, je JSON.stringify(). Táto funkcia prevádza objekt JSON na reťazec JSON. V tomto príklade priradíme náš objekt premennej obj. Prevedieme ho pomocou funkcie JSON.stringify(). Aby sme to urobili, odovzdáme obj funkcii a potom priradíme reťazec premennej s takto:

Zavolaním premennej s získate JSON ako reťazec:

• JSON.parse()

Pochopiteľne, JSON.parse() plní opačnú funkciu. Po dokončení prenosu dát ich musíte previesť späť na objekt JSON, aby ste s nimi mohli pracovať. Jednou z možností je použiť funkciu eval(). Tento prístup však nie je príliš bezpečný. Preto uprednostňujeme použitie funkcie JSON.parse() funkciu.

Zvážte predchádzajúci príklad ešte raz. Odovzdáme reťazec s funkcii JSON.parse(). Potom mu priradíme novú premennú:

Náš nový objekt je teraz o. Bude rovnaký ako obj. Viac svetla do toho vnesie, keď zvážime JSON.parse() v HTML súbore takto:

Tu môžete vidieť, ako sme skonvertovali reťazec s na načítateľný objekt. Teda, JSON.parse() je bezpečná možnosť na konverziu JSON reťazcov na objekty.

Záver

Ako sme videli v tomto návode, JSON má v JavaScripte množstvo využití. Je obzvlášť užitočný, pretože sa dá použiť s takmer akýmkoľvek programovacím jazykom, čo z neho robí prirodzenú voľbu. Okrem toho sme sa dotkli len povrchu. S JSON-om sa dá urobiť oveľa viac. Už teraz je podporovaný v API.

Tu sú ďalšie zdroje z nášho blogu ktoré vám pomôžu programovať v JavaScripte:

• Naučte sa, ako fungujú prototypy a dedičnosť v JavaScripte.
• Preskúmajte podrobne, ako pridať JavaScript do HTML.
• Ak vytvárate vlastnú webovú aplikáciu, pozrite si nášho sprievodcu, ako si vybrať najlepšie nastavenie servera.

Príjemné programovanie!