JSON – čo to je a ako ho používať?

Od Peter Tokoš

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>

Súvisiace

Publikované vskriptovacie jazyky

Značkyhtml JavaScript JSON