JavaScript: JSON

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>

<!DOCTYPE html>

<html>

<body>

<h2>Objektum létrehozása JSON stringből</h2>

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>
// Egy string definíciója
var inputString = '{"nev": "John", "kor": 30, "varos": "New York"}';

// Stringből JSON készítése
try {
  var jsonObjektum = JSON.parse(inputString);
  console.log("A stringből készített JSON objektum:", jsonObjektum);

  // JSON objektum újra stringgé alakítása
  var ujraString = JSON.stringify(jsonObjektum);
  console.log("Az újra stringgé alakított JSON:", ujraString);
} catch (error) {
  console.error("Hiba történt a JSON feldolgozás során: ", error);
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Objektum létrehozása JSON stringből</h2>

// Egy string definíciója

var inputString = '{"nev": "John", "kor": 30, "varos": "New York"}';

// Stringből JSON készítése

try {

var jsonObjektum = JSON.parse(inputString);

console.log("A stringből készített JSON objektum:", jsonObjektum);

// JSON objektum újra stringgé alakítása

var ujraString = JSON.stringify(jsonObjektum);

console.log("Az újra stringgé alakított JSON:", ujraString);

} catch (error) {

console.error("Hiba történt a JSON feldolgozás során: ", error);

}

</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>

<html>

<body>

<h2>Adatok tárolása</h2>

// 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>

Kategóriák

Friss bejegyzések

JavaScript objektumok

JavaScript: űrlap elemek kezelése