JSON – čo to je a ako ho používať?
JSON (JavaScript Object Notation) je ľahký a textový formát pre výmenu dát. Bol vytvorený na základe JavaScriptu, ale je nezávislý na programovacom jazyku. Je jednoduchý na čítanie a zápis a používa sa na prenos dát medzi webovými aplikáciami a klientmi.
JSON používa dva základné dátové typy: objekty a polia. Objekty sú zoskupenia kľúč-hodnota, kde kľúč je reťazec a hodnota môže byť ľubovoľný dátový typ (reťazec, číslo, boolean hodnota, null, objekt alebo pole). Polia sú zoznamy hodnôt, ktoré môžu byť ľubovoľného dátového typu a sú oddelené čiarkou.
JSON dáta sú vždy zapisované v textovom formáte a môžu byť ľahko dekódované a kódované. Dekódovanie JSON dát sa vykonáva pomocou funkcie JSON.parse()
, ktorá z textu vytvorí JavaScriptový objekt alebo pole. Naopak, kódovanie JSON dát sa vykonáva pomocou funkcie JSON.stringify()
, ktorá prevádza JavaScriptový objekt alebo pole na textovú reprezentáciu JSON.
V JSON existujú určité pravidlá zápisu. Objekty sú uzatvorené do zložených zátvoriek {}
, kde každý kľúč a hodnota sú oddelené dvojbodkou :
a záznamy sú oddelené čiarkou ,
. Polia sú uzatvorené do hranatých zátvoriek []
, kde prvky sú oddelené čiarkou ,
.
Príklad zápisu JSON objektu:
{ "meno": "Peter", "vek": 25, "adresa": { "ulica": "Hlavná", "mesto": "Bratislava", "krajina": "Slovensko" }, "zamestnanie": ["programátor", "vyvíjateľ"] }
Príklad zápisu JSON poľa:
[ { "meno": "Peter", "vek": 25 }, { "meno": "Jana", "vek": 30 }]
Jednoduchý príklad na použitie JSON v JavaScripte
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JSON</title> </head> <body> <input type="text" id="meno" placeholder="Zadajte svoje meno" required> <input type="text" id="priezvisko" placeholder="Zadajte svoje priezvisko" required> <input type="text" id="vek" placeholder="Zadajte svoje vek" required> <input type="text" id="adresa" placeholder="Zadajte svoje adresu" required> <button onclick="vypis()">výpis</button> <script> // jednoduchý príklad na použitie JSON v JavaScripte function vypis() { // Získame referencie na vstupné polia const menoInput = document.getElementById("meno"); const priezviskoInput = document.getElementById("priezvisko"); const vekInput = document.getElementById("vek"); const adresaInput = document.getElementById("adresa"); // Skontrolujeme, či sú všetky polia vyplnené if (menoInput.value.trim() === "" || priezviskoInput.value.trim() === "" || vekInput.value.trim() === "" || adresaInput.value.trim() === "") { alert("Všetky polia musia byť vyplnené!"); return; } // Vytvoríme objekt so vstupnými údajmi const pouzivatel = { meno: menoInput.value, priezvisko: priezviskoInput.value, vek: Number(vekInput.value), adresa: adresaInput.value }; // Prevod objektu "pouzivatel" na JSON reťazec const jsonPouzivatel = JSON.stringify(pouzivatel); // Vypíšeme JSON reťazec ako celok //const jsonOutput = document.createElement("pre"); //jsonOutput.textContent = jsonPouzivatel; //document.body.appendChild(jsonOutput); // Prevod JSON reťazca na objekt, aby sme vedeli parsovať vlastnosti a pracovať s nimi jednotlivo const objektPouzivatel = JSON.parse(jsonPouzivatel); // Vypíšeme vlastnosti objektu /* element p sa najprv vytvorí pomocou funkcie document.createElement("p"), ktorá vráti nový element typu p. Tento nový element sa ešte nenachádza v HTML dokumente, nachádza sa len v pamäti. Následne sa pomocou funkcie document.body.appendChild(textOutput) vytvorený element p vloží do HTML dokumentu. Táto funkcia pridáva (angl. append) nové elementy do existujúceho elementu, v tomto prípade do body elementu dokumentu. */ //document.body.innerHTML = ""; odkomentujte, ak nechcete zobrazovať predošlé výsledky, stránka sa vždý premaže const textOutput = document.createElement("p"); textOutput.textContent = `Meno: ${objektPouzivatel.meno}, Priezvisko: ${objektPouzivatel.priezvisko}, Adresa: ${objektPouzivatel.adresa}, Vek: ${objektPouzivatel.vek}`; document.body.appendChild(textOutput); } </script> </body> </html>