JavaScript JSON használata, készítése, feldolgozása, beolvasása

Ebben a cikkben megismerkedünk a JavaScript JSON szabványának fogalmával és használatával. Megmutatjuk, hogy hogyan készíthettek ti is el egy szabványos JSON fájlt, illetve azt is, hogy hogyan dolgozhattok fel egy JSON fájlt a saját JavaScript programotokban.

Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

JavaScript JSON használata, készítése, feldolgozása, beolvasása

Ebben a cikkben megismerkedünk a JavaScript JSON szabványának fogalmával és használatával. Megmutatjuk, hogy hogyan készíthettek ti is el egy szabványos JSON fájlt, illetve azt is, hogy hogyan dolgozhattok fel egy JSON fájlt a saját JavaScript programotokban.

Mi az a JSON? A JSON fogalma

A WikiPédia szerint: ,,A JSON (JavaScript Object Notation) egy kis méretű, szöveg alapú szabvány, ember által olvasható adatcserére.” A JavaScript-ből alakult ki egyszerű adatstruktúrák és tömbök ábrázolására.”

Bár a neve erősen azt sugallja, hogy csak a JavaScript-ben használhatunk JSON fájlokat, de ez nem igaz, hiszen a JSON nyelvfüggetlen és több nyelvhez is van értelmezője. A JSON szabványt nagyon gyakran használják arra, hogy adatokat küldjenek egy webszerverről egy weboldalra.

Szóval egyszerűsítve azt mondhatjuk, hogy a JSON strukturált adatok tárolására, továbbítására szolgál. Azaz ha van egy programunk, amiben objektumokat használunk, akkor azokat simán kimenthetjük, majd áttehetjük egy másik programba mindenféle bajlódás nélkül.

Milyen kiterjesztése van a JSON fájlnak?

Mivel ezeket az adatmentéseket egy külső fájlba tárolja, így értelemszerűen lesz fájlkiterjesztése is, ez pedig a .json lesz. A JSON hivatalos mime-típusa application/json.

Hogy néz ki egy JSON fájl?

{
"nyelvek":[
  {"nev":"HTML", "kiterjesztes":".html"},
  {"nev":"CSS", "kiterjesztes":".css"},
  {"nev":"JavaScript", "kiterjesztes":".js"}
]
}
Code language: JSON / JSON with Comments (json)

A fenti példa egy „nyelvek” objektumot definiál, amelynek három darab példánya van.

JSON szintaxis szabályok

Az alább olvasható szabályokat kell mindenképp betartanunk, hogy érvényes és működőképes JSON fájlt tudjunk készíteni.

  1. az adatok név és érték szerinti párban szerepelnek
  2. az adatok vesszővel vannak elválasztva
  3. az objektumokat (példányokat) kapcsos zárójelek határolják
  4. a tömböket szögletes zárójelek tárolják


Most pedig következzenek az egyes vázlatpontok kifejtései.

Az adatok név és érték szerinti párban szerepelnek

"nev":"HTML"
Code language: JavaScript (javascript)

Az adatok név és érték szerinti párban szerepelnek. Fontos, hogy a mezőnév (változónév) dupla idézőjel között szerepel, amit egy kettőspont követ, majd az érték, amely jelen esetben azért van idézőjelek között, mert egy string.

Az adatok vesszővel vannak elválasztva

{"nev":"HTML", "kiterjesztes":".html"},
{"nev":"CSS", "kiterjesztes":".css"}
Code language: JavaScript (javascript)

Az adatok vesszővel vannak elválasztva, két változó és név pár között is vessző található, illetve két példány között is. Leegyszerűsítve a fenti példában a két példány a két különböző sor.

Az objektumokat (példányokat) kapcsos zárójelek határolják

{"nev":"HTML", "kiterjesztes":".html"}
Code language: JSON / JSON with Comments (json)

Egy objektumot vagy példányt kapcsos zárójelek határolnak. Ha szeretnénk egy újabb példányt létrehozni vagy felvenni, akkor vesszőt kell tennünk és egy újabb sorba újabb kapcsos zárójelek közé felvenni az objektum mezőit és értékeit.

A tömböket szögletes zárójelek tárolják

"nyelvek":[
  {"nev":"HTML", "kiterjesztes":".html"},
  {"nev":"CSS", "kiterjesztes":".css"},
  {"nev":"JavaScript", "kiterjesztes":".js"}
]
Code language: JavaScript (javascript)

A JSON tömböket kapcsos zárójelek közé kell írnunk, csakúgy, mint a JavaScript-ben a tömbök tartalmazhatnak objektumokat.

A fenti példánkban a „nyelvek” egy tömb, amely három objektumot tartalmaz.

JSON fájl készítése JavaScript-ben

Most pedig jöjjön az, hogy hogyan kell szabályos és szabványos JSON állományt készíteni. Szerencsére nagyon egyszerű művelet, mert gyárilag minden le van programozva a JavaScript-ben, nekünk csak egy beépített függvényt kell használnunk.

Szintaxis

JSON.stringify(OBEJKTUM)
Code language: JavaScript (javascript)

Mindösszesen erre az egyetlen egy sorra van szükségünk, ez elkészíti nekünk a szabványos JSON modellünket, mely után mi nyugodtan eldönthetjük, hogy kimentjük egy fájlba, vagy elhelyezzük a weboldalunkon egy URL címen, ahonnan bárki elérheti.

Példa

JavaScript + HTML kód

JSON: <p id="szoveg"></p>
<button onclick="keszites()">JSON generálás</button>

<script>
	function keszites() {
		var nyelvek = [
			{"nev":"HTML", "kiterjesztes":".html"},
    		{"nev":"CSS", "kiterjesztes":".css"},
    		{"nev":"JavaScript", "kiterjesztes":".js"}
		];

		document.getElementById("szoveg").innerHTML = JSON.stringify(nyelvek);
}

</script>

Code language: JavaScript (javascript)

Eredmény

JSON:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

JSON fájl feldolgozása, beolvasása JavaScript-ben

A JSON adatállomány generálás után pedig következzen a fordított eset, amikor nem arra van szükségünk, hogy elkészítsünk egy JSON modellt, hanem arra, hogy beolvassunk egyet.

Szintaxis

JSON.parse(JSON.ADAT)
Code language: JavaScript (javascript)

A „JSON.ADAT” helyére megy a JSON adatunk, amelyet többféleképpen is megkaphat a programunk, beolvashatjuk közvetlenül egy fájlból a szerverünkről vagy lekérhetjük egy URL-en keresztül.

Példa

JavaScript + HTML kód

JSON: <p id="szoveg"></p>
<button onclick="olvasas()">JSON beolvasás</button>

<script>
	function olvasas() {
		const JSONadat = '[{"nev":"HTML","kiterjesztes":".html"},{"nev":"CSS","kiterjesztes":".css"},{"nev":"JavaScript","kiterjesztes":".js"}]';

		const obj = JSON.parse(JSONadat);
        
        var i=0;
        var szovegKiir="";
        
        while(i < 3) {
        szovegKiir += "Név: " + obj[i].nev + ", kiterjesztés: " + obj[i].kiterjesztes + "<br>";
        i++;
        }
        
		document.getElementById("szoveg").innerHTML = szovegKiir;
        
}

</script>

Code language: JavaScript (javascript)

Eredmény

JSON:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A kód elején feltételeztük, hogy a JSON adat már be van töltve, ezt tároltuk el a „JSONadat” változóban. Majd az „obj” nevű konstansban tároltuk el a „JSON.parse”-al beolvasott JSON adatot.

Az ezután következő kódok már csak azt a célt szolgálják, hogy szépen látható és könnyen értelmezhető formában legyen kiírva az adat a képernyőre.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!