JavaScript – JSON

10.évf_js JavaScript Web
Viktor

A JSON (JavaScript Object Notation) egy könnyen olvasható adatformátum, amelyet széles körben használják az adatok tárolására és átvitelére az interneten.
pl: ‘{„nev”:”Péter”, „eletkor”:40, „kerekpar”:1}’ Ez tulajdonképpen egy objektum, aminek van 3 tulajdonsága: név, kor, kerékpár, és ezeknek konkrét értékei.

A JSON az adatokat szöveges formátumban tárolja, könnyen értelmezhető. Az adatokat egyszerűen lehet JSON formátumba alakítani (JSON.stringify) majd vissza (JSON.parse), hogy megjeleníthessük azokat pl. egy weboldalon. A JSON-t számos programozási nyelv támogatja (JS, Python, C# …)

A JSON szintaxisa a következőképpen néz ki:

  • Az adatok objektumokban vagy tömbökben tárolhatóak.
  • A JSON objektumokat {} jelek közé kell tenni, és kulcs-érték párokat tartalmaznak, amelyeket kettősponttal választunk el. A kulcsokat mindig idézőjelek (” „) közé kell írni.
  • Az értékek lehetnek: szám, szöveg, logikai érték (true vagy false), null érték, objektum vagy tömb.
  • A tömbök a [] jelek között vannak, és az elemek vesszővel vannak elválasztva.
  • A szövegek mindig idézőjelben legyenek.

Nézzük meg, hogyan működik a JSON.parse! Adott egy json string, aminek az adataiból készítünk egy objektumot, majd kiíratjuk a konkrét értékeket. 

<!DOCTYPE html>
<html>
<body>
<h2>Objektum létrehozása JSON stringből</h2>
<p id="teszt"></p>
<script>
const pelda_json = '{"nev":"Teszt Elek","kor":30,"nem":"ferfi","aktív_élet":true,"hobbik":["futás", "úszás", "kerékpározás"]}'
const objektum = JSON.parse(pelda_json);
document.getElementById("teszt").innerHTML = objektum.nev + ", " + objektum.kor + ", " + objektum.hobbik;
</script>
</body>
</html>

Nézzük meg, hogyan lehet egy json string-ből stringet létrehozni a JSON.stringify segítségével.

<!DOCTYPE html>
<html>
<body>
<h2>Objektum létrehozása JSON stringből</h2>
<p id="teszt"></p>
<script>
const pelda_json = '{"nev":"Teszt Elek","kor":30,"nem":"ferfi","aktív_élet":true,"hobbik":["futás", "úszás", "kerékpározás"]}'
const szoveg = JSON.stringify(pelda_json);
document.write(typeof szoveg+"<br>") //mi a típusa? Tényleg string!
document.write(szoveg.substring(0,24)) //Írjuk ki az első 24 karakterét
</script>
</body>
</html>

Hogyan lehet helyben eltárolni, majd újra kiolvasni egy JSON objektumot? Adatátvitel html oldalak között.

<html>
<body>
<h2>Adatok tárolása</h2>
<p id="bekezdes"></p>
<script>
// Adat tárolása:
const szemely_objektum = { nev: "Teszt Elek", kor: 30, lakhely: "Gyula" };
const adat = JSON.stringify(szemely_objektum);
localStorage.setItem("teszt", adat);

// Tárolt adat "helyreállítása": (ez lehet másik html oldalon is!)
let text = localStorage.getItem("teszt");
let objektum = JSON.parse(text);
document.getElementById("bekezdes").innerHTML = objektum.nev + ", " + objektum.kor + ", " + objektum.lakhely;
</script>
</body>
</html>