hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu en hu en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu en hu hu hu hu hu hu hu hu da hu hu cs hu hu de hu hu hu hu hu en hu hu cs hu hu de hu hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
JavaScript JSON használata, készítése, feldolgozása, beolvasása - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
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?
Hogy néz ki egy JSON fájl?
A fenti példa egy “nyelvek” objektumot definiál, amelynek három darab példánya van.
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.
az adatok név és érték szerinti párban szerepelnek
az adatok vesszővel vannak elválasztva
az objektumokat (példányokat) kapcsos zárójelek határolják
a tömböket szögletes zárójelek tárolják
Most pedig következzenek az egyes vázlatpontok kifejtései.
1. 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.
2. 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.
3. 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.
4. 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.
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.
JavaScript + HTML kód
JSON:     JSON generálás    function keszites() { var nyelvek = [ {"nev":"HTML", "kiterjesztes":".html"}, {"nev":"CSS", "kiterjesztes":".css"}, {"nev":"JavaScript", "kiterjesztes":".js"} ]; document.getElementById("szoveg").innerHTML = JSON.stringify(nyelvek); }   Code language: JavaScript (javascript)
>> 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.
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.
JavaScript + HTML kód
JSON:     JSON beolvasás    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  "; i++; } document.getElementById("szoveg").innerHTML = szovegKiir; }   Code language: JavaScript (javascript)
>> 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!
JavaScript alapok (A JS programozás alapjai)
Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)
JavaScript logikai változó (JS boolean magyarul)
Mi az a JavaScript? A JavaScript (JS) bemutatása
#JavaScript #JavaScript alapok #JavaScript alapok kezdőknek #javascript ismeretek #JavaScript programozás #JavaScript tananyag #JavaScript webfejlesztés #JavaScript webprogramozás #JS alapok #JSON #webfejlesztés #webprogramozás alapjai #webprogramozás alapok
Mi az a JavaScript? A JavaScript (JS) bemutatása
JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) – head, body, külső fájl
Milyen JavaScript szerkesztő programot használjak? + Letöltés
JavaScript alapok (A JS programozás alapjai)
JavaScript változók és konstansok (var, let és const magyarul)
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)
JavaScript ciklusok, azaz JS iterációk (for, while, do while)
A for ciklus használata a JavaScript-ben (JS for iteráció elmélet, szintaktika, példa)
JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa)
JavaScript operátorok ismertetése (JS aritmetikai, értékadó, összehasonlító, logikai, bitenkénti és típus operátor bemutatása)
JavaScript logikai változó (JS boolean magyarul)
JavaScript elágazások (if, switch)
if használata a JavaScript-ben (JS if, else és else if magyarul)
A switch használata a JavaScript-ben (JS switch…case)
JavaScript alert használati útmutató (JS felugró ablak)
JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)
JavaScript függvények, eljárások, metódusok (JS függvény fogalma, létrehozása, meghívása)
JavaScript események (JS event magyarul)
JavaScript onclick esemény (JavaScript függvény meghívása kattintáskor, gomb megnyomásakor)
JavaScript objektumok fogalma, létrehozása, használata (Objektum tulajdonságok és metódusok szintaxisa + példa)
JavaScript JSON használata, készítése, feldolgozása, beolvasása
Random, véletlenszám generálása JavaScript-ben (JS Math.random() és Math.floor() magyarul)
Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével
A legjobb JavaScript keretrendszerek (17 JS framework)