Bevezetés
Sokféleképpen lehet a JSON-t használni a JavaScript nyelvben. Egyik legalapvetőbb felhasználási módja az adattárolás. Használható adatok átvitelére is kliensek között, szerverek között, vagy szerverről kliensre. További hasznos alkalmazási területei közé tartozik az adatok konfigurálásának és ellenőrzésének lehetősége, valamint adatstruktúrák generálása.
Ebben az útmutatóban azt fogjuk megvizsgálni, hogyan használhatja a JSON-t a JavaScript programjaiban. Ha már rendelkezik korábbi tapasztalattal a JavaScript programozás terén, ez teljesen egyértelműnek fog tűnni az Ön számára.
Mi az a JSON?
A JSON a JavaScript Object Notation (JavaScript objektumjelölés) rövidítése. Ez egy olyan formátum, amelyet a különböző típusú adatok megosztásának lehetővé tételére terveztek. A JSON elsősorban a JavaScriptet használja fő programozási nyelveként. Emellett más nyelvekkel is működik, mint például a Python, PHP, Ruby, valamint a Java. Könnyen olvasható, rendkívül kis méretű, és nem igényel sok formázást. A formátum általános szintaxisával és felépítésével az alábbi útmutatónkat követve ismerkedhet meg: A JSON adatmegosztási formátum áttekintése.
A JSON használható önállóan, vagy definiálható egy másik fájlformátumban is. Önállóan a .json kiterjesztést használja. Más formátumban vagy idézőjelek közötti JSON-karakterláncként, vagy egy változóhoz rendelt objektumként jelenik meg. Például a JSON használható .html formátumban is. Ez a formátum lehetővé teszi, hogy viszonylag könnyen végezzen adatátvitelt a szerver és a böngésző között.
A JSON formátum szövegalapú. A kulcs-érték adatok kapcsos zárójelek között jelennek meg. Így néz ki egy tipikus .json fájl:
|
1 2 3 4 5 |
{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Ha egy JSON objektum van egy .js vagy .html fájlban, az egy ilyen változóként fog megjelenni:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Bizonyos esetekben előfordulhat, hogy mindet egy sorban látja. Ez akkor van, amikor a JSON karakterláncként jelenik meg a JavaScript fájlban lévő objektum helyett:
|
1 |
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; |
A JSON objektumokat karakterláncokká alakíthatja. Ez akkor hasznos, ha gyors adatátvitelt szeretne végezni.
JSON vs JavaScript objektum
Ahogy korábban említettük, a JSON bármilyen programozási nyelvvel működik. Azonban a JavaScript objektumokkal csak JavaScript használatával lehet dolgozni. A JSON és a JavaScript szintaxisa hasonló. A különbség az, hogy a JavaScript objektumok karakterláncokban jelennek meg idézőjelek helyett. Ezenkívül a JavaScript objektumok függvényeket is használhatnak értékként, ami azt jelenti, hogy kevésbé korlátozottak.
A következő példában egy felhasználó JavaScript opcióját mutatjuk be. A felhasználó Sammy Shark, és jelenleg online:
|
1 2 3 4 5 6 7 8 |
var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; } }; |
Amint látható, nincsenek idézőjelek az olyan kulcsok körül, mint a first_name, last_name, online, vagy full_name. Emellett az utolsó sorban egy függvényérték található. Ha karakterlánc formájában szeretne hozzáférni az adatokhoz, meghívhatja a user.first_name értéket a pont jelölés használatával. Ha ehelyett a teljes nevet szeretné, akkor a user.full_name() függvényt fogja használni, mivel ez egy függvény.
Hogyan lehet hozzáférni a JSON adatokhoz
Ahogy az előző részben említettük, a JSON adatokhoz JavaScriptben a pont jelölés használatával férhet hozzá. Vegyük például a következő nevű JSON objektumot: sammy:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
A pont jelölés az értékek eléréséhez a következő lesz:
|
1 2 3 |
sammy.first_name sammy.last_name sammy.online |
Először a változó következik. Ezután egy pontot teszünk. Végül megadjuk a kulcsot, amelyhez hozzá szeretnénk férni.
Tegyük fel, hogy egy olyan riasztást szeretnénk létrehozni JavaScriptben, amely megmutatja a first_name kulcs értékét. Ahhoz, hogy ez egy felugró ablakban jelenjen meg, a JavaScript alert() függvényt fogjuk használni a következőképpen:
|
1 |
alert(sammy.first_name); |
|
1 2 |
Output Sammy |
Egy másik módja a JSON-ból származó adatok elérésének a szögletes zárójeles szintaxis használata. A kulcsot idézőjelek közé kell helyezni a szögletes zárójelen belül. Íme az előző példa folytatása:
|
1 |
alert(sammy["online"]); |
|
1 2 |
Output true |
Mi van akkor, ha beágyazott tömbelemekkel dolgozik? Ebben az esetben a tömbben lévő elem sorszámát kell meghívnia. Vegyük a következő példát:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var user_profile = { "username" : "SammyShark", "social_media" : [ { "description" : "twitter", "link" : "https://twitter.com/digitalocean" }, { "description" : "facebook", "link" : "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description" : "github", "link" : "https://github.com/digitalocean" } ] } |
Tegyük fel, hogy el szeretnénk érni a facebook karakterláncot. Íme, hogyan használjuk a pont jelölést a tömbben lévő elem eléréséhez a sorszáma alapján:
|
1 |
alert(user_profile.social_media[1].description); |
|
1 2 |
Output facebook |
Ne feledje, hogy minden további beágyazott elemhez egy újabb pontot kell hozzáadnia.
JSON-nal használt függvények
A következőkben megnézünk néhány olyan függvényt, amelyet a JSON-nal használhat. Az adatátvitel és -tárolás meglehetősen egyszerűvé válik, ha a JSON-t objektumból karakterlánccá vagy karakterláncból objektummá tudja alakítani. Megvizsgáljuk, hogyan lehet a JSON-t kétféleképpen stringify-olni és parse-olni:
- JSON.stringify()
A karakterláncokat célszerűbb használni, ha az adatokat könnyűsúlyú módon szeretnénk átvinni. Ezért használják adatok tárolására és átvitelére a klienstől a szerver felé. Vegyük a következő példát. Tegyük fel, hogy egy felhasználó beállításainak adatait gyűjti össze egy gépen. Ezt az információt el kell küldenie a szerverére. Erre a célra karakterláncot használna. Ezután visszaalakíthatja a JSON.parse() segítségével, hogy olvashassa és dolgozhasson vele.
A függvény, amelyet itt kiemelünk, a JSON.stringify(). Ez a függvény egy JSON-objektumot JSON-karakterlánccá alakít át. Ebben a példában az objektumunkat hozzárendeljük a obj. A JSON.stringify() függvénnyel fogjuk átalakítani. Ehhez átadjuk az obj változót a függvénynek, majd hozzárendeljük a karakterláncot az s változóhoz a következőképpen:
|
1 2 |
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"} var s = JSON.stringify(obj) |
Az s változó meghívásával a JSON-t karakterláncként kapja meg:
|
1 |
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}' |
- JSON.parse()
Érthető módon a JSON.parse() az ellenkező funkciót látja el. Miután befejezte az adatok átvitelét, vissza kell alakítania azokat JSON-objektummá, hogy dolgozhasson velük. Az egyik lehetőség az eval() függvény használata. Ez a megközelítés azonban nem túl biztonságos. Ezért részesítjük előnyben a JSON.parse() függvény használatát.
Tekintsük újra az előző példát. Átadjuk az s karakterláncot a JSON.parse() függvénynek. Ezután egy új változót rendelünk hozzá:
|
1 |
var o = JSON.parse(s) |
Az új objektumunk most az o. Ez ugyanaz lesz, mint az obj. Jobb betekintést nyerhetünk, ha a JSON.parse() függvényt egy ilyen HTML-fájlban vizsgáljuk meg:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p id="user"></p> <script> var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; var obj = JSON.parse(s); document.getElementById("user").innerHTML = "Név: " + obj.first_name + " " + obj.last_name + "<br>" + "Helyszín: " + obj.location; </script> </body> </html> |
Itt látható, hogyan konvertáltuk a(z) s karakterláncot egy lekérdezhető objektummá. Így a(z) JSON.parse() biztonságos opció a JSON karakterláncok objektumokká történő konvertálására.
Összegzés
Ahogy ebben az útmutatóban láthattuk, a JSON számos implementációval rendelkezik a JavaScriptben. Különösen hasznos, mivel szinte bármilyen programozási nyelvvel használható, így ez a legtermészetesebb választás. Ráadásul ezzel még csak a felszínt kapargattuk. Sokkal több mindent lehet tenni a JSON-nal. Az API-k már most is támogatják.
Íme további források a(z) blogunkról, amelyek segítenek a JavaScript programozásban:
- Ismerje meg, hogyan működnek a prototípusok és az öröklődés a JavaScriptben.
- Fedezze fel részletesen, hogyan adható hozzá a JavaScript a HTML-hez.
- Ha saját webalkalmazást épít, tekintse meg útmutatónkat a legjobb szerverbeállítás kiválasztásáról.
Kellemes programozást!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.