Tutoriál o práci s JSON v JavaScriptu

Úvod

Existuje mnoho způsobů, jak lze JSON použít v JavaScriptu. Jedním z jeho nejzákladnějších použití je ukládání dat. Můžete jej také použít k přenosu dat mezi klienty, mezi servery nebo ze serveru ke klientovi. Mezi další užitečné aplikace patří možnost konfigurovat a ověřovat data a také generovat datové struktury.

V tomto návodu se podíváme na to, jak můžete JSON používat ve svých programech v JavaScriptu. Pokud již máte zkušenosti s programováním v JavaScriptu, mělo by to pro vás být snadné.

Co je JSON?

JSON znamená JavaScript Object Notation (zápis objektů v JavaScriptu). Je to formát navržený tak, aby umožňoval sdílení různých typů dat. JSON využívá hlavně JavaScript jako svůj primární programovací jazyk. Funguje také s jinými jazyky, jako je Python, PHP, Ruby, stejně jako Java. Je snadno čitelný, extrémně lehký a nevyžaduje mnoho formátování. S obecnou syntaxí a strukturou tohoto formátu se můžete seznámit v našem návodu: Přehled formátu pro sdílení dat JSON.

JSON lze použít samostatně nebo jej definovat v jiném formátu souboru. Pokud je samostatný, používá příponu .json. V jiném formátu se zobrazuje buď jako řetězec JSON v uvozovkách, nebo jako objekt přiřazený proměnné. JSON lze například použít také ve formátu .html. Tento formát umožňuje relativně snadno provádět přenos dat mezi serverem a prohlížečem.

Formát JSON je textový. Data ve formátu klíč-hodnota se uvádějí ve složených závorkách. Zde je ukázka toho, jak vypadá typický soubor .json:

Pokud máte objekt JSON v souboru .js nebo .html zobrazí se jako proměnná takto:

V některých případech je můžete vidět všechny na jednom řádku. To se stává, když se JSON v souboru JavaScriptu vykreslí jako řetězec namísto objektu:

Objekty JSON můžete převést na řetězce. To je užitečné, pokud chcete provést rychlý přenos dat.

JSON vs. objekt JavaScriptu

Jak jsme již zmínili, JSON funguje s jakýmkoli programovacím jazykem. S objekty JavaScriptu však můžete pracovat pouze pomocí JavaScriptu. Syntaxe v JSON a JavaScriptu je podobná. Rozdíl je v tom, že objekty JavaScriptu se objevují v řetězcích namísto uvozovek. Objekty JavaScriptu navíc mohou jako hodnoty používat funkce, což znamená, že jsou méně omezené.

V následujícím příkladu ukazujeme JavaScriptovou verzi uživatele. Uživatel je Sammy Shark a právě teď je online:

Jak vidíte, kolem žádných klíčů jako first_name, last_name, online nebo full_name nejsou žádné uvozovky. Na posledním řádku je také umístěna hodnota funkce. Pokud chcete k datům přistupovat v podobě řetězce, můžete zavolat user.first_name pomocí tečkové notace. Pokud místo toho chcete celé jméno, použijete user.full_name(), protože se jedná o funkci.

Jak přistupovat k datům JSON

Jak jsme zmínili v minulé části, k datům JSON můžete v JavaScriptu přistupovat pomocí tečkové notace. Vezměme si jako příklad objekt JSON s názvem sammy:

Naše tečková notace pro přístup k hodnotám bude:

Nejprve se uvádí proměnná. Poté napíšeme tečku. Nakonec uvedeme klíč, ke kterému chceme přistoupit.

Řekněme, že chceme v JavaScriptu vytvořit alert, který zobrazuje hodnotu first_name klíče. Aby se zobrazil ve vyskakovacím okně, použijeme JavaScriptovou funkci alert() takto:

Dalším způsobem, jak přistupovat k datům z JSON, je použití syntaxe s hranatými závorkami. Klíč by měl být umístěn v uvozovkách uvnitř hranatých závorek. Zde je pokračování předchozího příkladu:

Co když pracujete s vnořenými prvky pole? V tomto případě musíte volat číslo položky v poli. Vezměte si následující příklad:

Řekněme, že chceme přistoupit k řetězci facebook. Zde je návod, jak použijeme tečkovou notaci pro přístup k této položce v poli pomocí jejího čísla:

Nezapomeňte přidat další tečku pro každý vnořený prvek.

Funkce používané s JSON

Dále se podíváme na několik funkcí, které můžete s JSON použít. Přenos a ukládání dat se stává docela snadným, když můžete převést JSON z objektu na řetězec nebo z řetězce na objekt. Prozkoumáme, jak můžete převést JSON na řetězec (stringify) a analyzovat jej (parse) dvěma různými způsoby:

• JSON.stringify()

Řetězce je lepší používat, když se snažíte přenášet data odlehčeným způsobem. Proto se používají k ukládání a přenosu dat z klienta na server. Zvažte následující příklad. Řekněme, že shromažďujete data o nastavení uživatele na jednom počítači. Tyto informace potřebujete odeslat na server. K tomuto účelu byste použili řetězec. Poté jej můžete převést zpět pomocí JSON.parse() pro jeho čtení a práci s ním.

Funkce, kterou zde vyzdvihneme, je JSON.stringify(). Tato funkce převádí objekt JSON na řetězec JSON. V tomto příkladu přiřadíme náš objekt do proměnné obj. Převedeme jej pomocí funkce JSON.stringify(). Chcete-li to provést, předáme obj této funkci a poté přiřadíme řetězec do proměnné s takto:

Volání proměnné s vám vrátí JSON jako řetězec:

• JSON.parse()

Pochopitelně JSON.parse() plní opačnou funkci. Po dokončení přenosu dat je musíte převést zpět na objekt JSON, abyste s ním mohli pracovat. Jednou z možností je použít funkci eval(). Tento přístup však není příliš bezpečný. Proto raději používáme funkci JSON.parse() funkci.

Zvažte předchozí příklad ještě jednou. Předáme řetězec s do funkce JSON.parse(). Poté jí přiřadíme novou proměnnou:

Náš nový objekt je nyní o. Bude stejný jako obj. Lepší představu získáme, když zvážíme JSON.parse() v souboru HTML takto:

Zde můžete vidět, jak jsme převedli řetězec s na přístupný objekt. Tedy, JSON.parse() je bezpečná volba pro převod JSON řetězců na objekty.

Závěr

Jak jsme viděli v tomto návodu, JSON má v JavaScriptu mnoho využití. Je obzvláště užitečný, protože jej lze použít s téměř jakýmkoli programovacím jazykem, což z něj činí přirozenou volbu. Navíc jsme se dotkli pouze povrchu. S JSON toho lze dělat mnohem více. Již nyní je podporován v rozhraních API.

Zde jsou další zdroje z našeho blogu které vám pomohou programovat v JavaScriptu:

• Naučte se, jak fungují prototypy a dědičnost v JavaScriptu.
• Prozkoumejte podrobně, jak přidat JavaScript do HTML.
• Pokud vytváříte vlastní webovou aplikaci, podívejte se na našeho průvodce, jak vybrat nejlepší nastavení serveru.

Přejeme příjemné programování!