JavaScript JSON

Obsah

JSON je formát pro ukládání a přenos dat.

JSON se často používá při odesílání dat ze serveru na web strana.

Co je JSON?

JSON je zkratka pro JavaScript Object Notation
JSON je odlehčený formát pro výměnu dat
JSON je jazykově nezávislý *
JSON je „sebepopisující“ a snadno pochopitelný

* Syntaxe JSON je odvozena ze syntaxe zápisu objektu JavaScript, ale formát JSON je pouze text. Kód pro čtení a generování dat JSON lze napsat v libovolném programování Jazyk.

Příklad JSON

Tato syntaxe JSON definuje objekt zaměstnanci: pole 3 záznamů zaměstnanců (objektů):

Příklad JSON

{
"employees":[
  {"firstName":"John", "lastName":"Doe"}, 
  {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

Formát JSON se vyhodnocuje na objekty JavaScriptu

Formát JSON je syntakticky identický s kódem pro vytváření JavaScript objekty.

Kvůli této podobnosti program JavaScript lze snadno převést data JSON na nativní JavaScript objekty.

Pravidla syntaxe JSON

Data jsou v párech název/hodnota
Data jsou oddělena čárkami
Kudrnaté závorky drží předměty
Hranaté závorky obsahují pole

Data JSON - název a hodnota

Data JSON se zapisují jako páry název/hodnota, stejně jako objekt JavaScript vlastnosti.

Pár název/hodnota se skládá z názvu pole (ve dvojitých uvozovkách), následuje dvojtečka následovaná hodnotou:

"firstName":"John"

JSON názvy vyžadují dvojité uvozovky. Jména JavaScript ne.

Objekty JSON

Objekty JSON se zapisují do složených závorek.

Stejně jako v JavaScriptu mohou objekty obsahovat více párů název/hodnota:

{"firstName":"John", "lastName":"Doe"}

Pole JSON

Pole JSON se zapisují do hranatých závorek.

Stejně jako v JavaScriptu může pole obsahovat objekty:

"employees":[
   
{"firstName":"John", "lastName":"Doe"}, 
   
{"firstName":"Anna", "lastName":"Smith"}, 
   
{"firstName":"Peter", "lastName":"Jones"}
]

Ve výše uvedeném příkladu je objektem "zaměstnanci" pole. Obsahuje tři objektů.

Každý objekt je záznamem osoby (s křestním jménem a příjmením).

Převod textu JSON na objekt JavaScriptu

Běžným použitím JSON je čtení dat z webového serveru, a zobrazit data na webové stránce.

Pro jednoduchost to lze demonstrovat pomocí řetězce jako vstupu.

Nejprve vytvořte řetězec JavaScriptu obsahující syntaxi JSON:

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Poté pomocí vestavěné funkce JavaScriptu JSON.parse() převeďte řetězec na objekt JavaScript:

const obj = JSON.parse(text);

Nakonec na své stránce použijte nový objekt JavaScript:

Příklad

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

Více o JSON si můžete přečíst v našem JSON tutoriálu.