Jak Pracovat s JSON v Javascriptu

Úvod

Protože JSON je odvozen z programovacího jazyka JavaScript, je přirozenou volbou použít jako formát dat v Javascriptu. JSON, zkratka pro zápis objektu JavaScript, je obvykle vyslovován jako název “ Jason.“

Chcete-li se dozvědět více o JSON obecně, přečtěte si návod „Úvod do JSON“.

Chcete-li začít přemýšlet o tom, kde můžete používat JSON ve svých programech JavaScript, některé obecné případy použití JSON zahrnují:

• Ukládání dat
• Generování struktury dat z vstup uživatele
• Přenos dat ze serveru na klienta, klienta na server a ze serveru na server
• Konfigurace a ověření dat

Tento výukový program vám poskytne úvod do práce s JSON v Javascriptu. Chcete-li tento úvod co nejlépe využít, měli byste se seznámit s programovacím jazykem JavaScript.

formát JSON

formát JSON je odvozen ze syntaxe objektu JavaScript, ale je zcela textový. Jedná se o datový formát klíčové hodnoty, který je obvykle vykreslen v složených závorkách.

Když pracujete s JSON, pravděpodobně uvidíte objekty JSON v souboru .json, ale mohou také existovat jako objekt nebo řetězec JSON v kontextu programu. Přečtěte si více o syntaxi a struktuře zde.

Když pracujete se souborem .json, bude to vypadat takto:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Pokud je místo, máte JSON objekt v .js nebo .html soubor, budete pravděpodobně vidět to nastavit do proměnné:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Navíc, můžete vidět JSON jako řetězec, spíše než objekt v kontextu JavaScript program, soubor nebo skript. V tomto případě můžete také vidět vše na jednom řádku:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

převod objektů JSON do řetězců může být zvláště užitečný pro rychlý přenos dat.

prošli jsme obecný formát JSON a jak můžete očekávat, že jej uvidíte jako soubor .json nebo v JavaScriptu jako objekt nebo řetězec.

srovnání s objektem JavaScript

je třeba mít na paměti, že JSON byl vyvinut pro použití v jakémkoli programovacím jazyce, zatímco objekty JavaScript lze pracovat pouze přímo prostřednictvím programovacího jazyka JavaScript.

pokud jde o syntaxi, objekty JavaScript jsou podobné JSON, ale klíče v objektech JavaScript nejsou řetězce v uvozovkách. Objekty JavaScriptu jsou také méně omezené, pokud jde o typy předané hodnotám, takže mohou používat funkce jako hodnoty.

podívejme se na Příklad objektu JavaScriptu uživatele webu Sammy Shark, který je aktuálně online.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

To bude vypadat velmi dobře na vás, jako JSON objekt, ale nejsou tam žádné uvozovky kolem libovolné klávesy (first_namelast_nameonline nebo full_name), a tam je funkce, hodnota v posledním řádku.

chceme-Li přistupovat k datům v JavaScript object výše, můžeme použít tečkové notace volat user.first_name; a dostat řetězec, ale pokud chceme, aby přístup k plné jméno, museli bychom tak učinit zavoláním user.full_name();, protože to je funkce.

objekty JavaScriptu mohou existovat pouze v jazyce JavaScript, takže když pracujete s daty, ke kterým je třeba přistupovat různými jazyky, je nejlepší zvolit JSON.

přístup k JSON datům

JSON data jsou běžně přístupná v JavaScriptu pomocí bodové notace. Abychom pochopili, jak to funguje, podívejme se na JSON objekt sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

pro přístup k některé z hodnot, které budeme používat tečka zápis, který vypadá takto:

sammy.first_namesammy.last_namesammy.online

proměnné sammy je první, následuje tečka, následuje klíč k být přístupné.

vytvořit JavaScript alert, který nám ukazuje hodnota spojená s klíčem first_name v pop-up, můžeme tak učinit voláním Javascriptu alert() funkce:

alert(sammy.first_name);

Output
Sammy

Tady, úspěšně jsme tzv. hodnota spojená s first_name klíč sammy JSON objekt.

můžeme také použít syntaxi hranatých závorek pro přístup k datům z JSON. Abychom to udělali, ponechali bychom klíč ve dvojitých uvozovkách v hranatých závorkách. Pro naše sammy variabilní výše, pomocí syntaxe hranatá závorka v alert() funkce vypadá takto:

alert(sammy);

Output
true

Když pracujete s vnořenými prvky pole, měli byste zavolat na číslo položky v poli. Podívejme se na JSON níže:

var user_profile = { "username" : "SammyShark", "social_media" : }

pro přístup K řetězec facebook, můžeme říkat, že položku v poli v rámci dot notace:

alert(user_profile.social_media.description);

Output
facebook

Všimněte si, že pro každý vnořený element použijeme další tečka.

použití tečkové notace nebo syntaxe hranatých závorek nám umožňuje přístup k datům obsaženým ve formátu JSON.

funkce pro práci s JSON

tato část se zaměří na dvě metody pro stringifikaci a analýzu JSON. Schopnost převést JSON z objektu na řetězec a naopak je užitečná pro přenos a ukládání dat.

JSON.stringify ()

funkce JSON.stringify() převede objekt na řetězec JSON.

Struny jsou užitečné pro přenos dat z klienta na server prostřednictvím ukládání nebo předávání informací v lehké cestě. Můžete například shromáždit nastavení uživatele na straně klienta a poté je odeslat na server. Později si pak můžete přečíst informace pomocí metody JSON.parse() a pracovat s daty podle potřeby.

podíváme se na objekt JSON, který jsme přiřadili do proměnné obj a pak budeme převést jej pomocí JSON.stringify() procházející obj funkce. Můžeme přiřadit tento řetězec do proměnné s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

Nyní, pokud budeme pracovat s s budeme mít JSON nám k dispozici jako řetězec, spíše než objekt.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

funkce JSON.stringify() nám umožňuje převést objekty na řetězce. Chcete-li udělat opak, podíváme se na funkci JSON.parse().

JSON.parse ()

řetězce jsou užitečné pro přepravu, ale budete je chtít převést zpět na objekt JSON na straně klienta a / nebo serveru. I když můžete převést text na objekt pomocí funkce eval(), není to příliš bezpečné, takže místo toho použijeme funkci JSON.parse().

Chcete-li převést příklad v JSON.stringify () § výše, chceme předat řetězec s funkce, a přiřadit ji k nové proměnné:

var o = JSON.parse(s)

Potom budeme mít objekt o pracovat s, které by byly totožné pro objekt obj.

Chcete-li se hlouběji podívat, zvažte příklad JSON.parse() v kontextu souboru HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

v Rámci souboru HTML, můžeme vidět, jak JSON řetězec s je převeden na objekt, který je dohledatelné na konečné vykreslení stránky pomocí přístupu JSON pomocí tečkové notace.

JSON.parse() je bezpečná funkce pro analýzu JSON řetězců a jejich převod na objekty.

závěr

JSON je přirozený formát pro použití v JavaScriptu a má mnoho implementací dostupných pro použití v mnoha populárních programovacích jazycích. Pokud chcete formát použít v jiném jazyce progamming, můžete vidět plnou jazykovou podporu na webu „Představujeme JSON“.

Protože je lehký a snadno přenášet mezi programovací jazyky a systémy, JSON zažívá zvýšenou podporu v Api, včetně Twitter API.