A Webfejlesztés blokk honlapja

Mi az a JSON?

JSON egy mozaikszó „JavaScript Object Notation”-ból, ami magyarra lefordítva, JavaScript Objektum jelzésrendszert jelent. Érthetőbben megfogalmazva ez azt foglalja magába, hogy a JavaScript ebben a formátumban képes az adatot könnyedén feldolgozni. Egy egyszerűen felhasználható adatátviteli szabvány.

JSON fájl kiterjesztést a JavaScripten kívül (habár kifejezetten ehhez fejlesztették eredetileg) nagyon sok programozási nyelv natívan támogatja, lényegében egy alternatíva az XML-re.

<?xml version="1.0" encoding="UTF-8"?>
<Recept név="kenyér" elk_idő="5 perc" sütés_idő="3 óra">
  <cím>Egyszerű kenyér</cím>
  <összetevő mennyiség="3" egység="csésze">Liszt</összetevő>
  <összetevő mennyiség="10" egység="dekagramm">Élesztő</összetevő>
  <összetevő mennyiség="1.5" egység="csésze">Meleg víz</összetevő>
  <összetevő mennyiség="1" egység="teáskanál">Só</összetevő>
  <Utasítások>
    <lépés>Keverj össze minden összetevőt, aztán jól gyúrd össze!</lépés>
    <lépés>Fedd le ruhával és hagyd pihenni egy óráig egy meleg szobában!</lépés>
    <lépés>Gyúrd össze újra, helyezd bele egy bádogedénybe, aztán süsd meg a sütőben!</lépés>
  </Utasítások>
</Recept>
                                

Példák

Mi példánk

Ezen a linken megtekinthető

API-k

Az API mozaikszó az "Application Programming Interface"-ből ered, ami magyarra forditva "Alkalmazás Programozás Interfész"-t jelent. Ez egy szoftver közvetítő, amely lehetővé teszi két alkalmazás egymással való beszélgetését. Mindig, amikor egy olyan alkalmazást használsz, mint a Facebook, küldesz egy üzenetet az interneten keresztül, vagy csak megnézed az időjárás előrejelzést a telefonodon, akkor API-t használsz.

Egy példa az API-kkal való kommunikációra a Google maps. A Google hagyja a fejlesztőknek, hogy az alkalmazásaikba beintegrálják a Google Maps-et, hogy adatokat érhessenek el rajta keresztül. Ez mind egy API platformon keresztül lehetséges.

JSON megtekintése, olvasása

A JSON úgy van kialakítva, hogy szabad szemmel olvasható legyen, ha ránézel lásd, hogy körülbelül miről van szó. Ha a példa linkre rákattintasz, és Firefoxot használsz akkor a böngésződ megnyitja és értelmezi, sőt nyilacskákat is rak ki, amire lehet kattintgatni, sőt egy meglepően gyorsan működő keresési funkciót is ad.

Amennyiben valamilyen chromeium alapú böngészőt használsz (Chrome, opera, vivaldi, 2020-as edge), akkor pontosan úgy nyitja meg, mintha szöveges fájl lenne. Ezekhez a böngészőkhöz érdemes lehet JSON értelmező kiegészítőket letölteni a hivatalos market place-jükből.

Ezen felül ez a fájl típus nem igényel semmilyen speciális eszközt, ha letöltjük (jobb klikk -> Save as ) akkor bármilyen szövegszerkesztővel (akár a Windows-ba beépített segítségével is, de az határozottan nem ajánlott) megnyitható.

Beolvasása

Ennek a megvalósításához több lépésre is szükségünk van. Az első lépés, hogy beolvassuk a fájlt a szerverről. Ez csak akkor fog működni, ha egy Apache http szerver vagy valami ehhez hasonló http szerver futtatja a weboldalunkat. Ezt a környezetet fel lehet telepíteni XAMPP, docker környezet segítségével, vagy szimplán az apache/egyéb http kiszolgáló szerver direkt futtatásával. (Nekem docker-ben egy egyszerű apache kiszolgáló szerver van feltelepítve, de ennek nem kell befolyásolnia az eredményt).

                            let json;
                            let xhttp = new XMLHttpRequest();
                            xhttp.onreadystatechange = load;
                        
                            function load()
                            {
                                if (this.readyState == 4 && this.status == 200)
                                {
                                    json = this.responseText;
                                }
                            }
                            xhttp.open(`GET`,`example.json`,true);
                            xhttp.send();
                        

feldolgozott = JSON.parse(json);

                            let json;
                            let feldolgozott;
                            let xhttp = new XMLHttpRequest();
                            xhttp.onreadystatechange = load;
                        
                            function load()
                            {
                                if (this.readyState == 4 && this.status == 200)
                                {
                                    json = this.responseText;
                                    feldolgozott = JSON.parse(json);
                                }
                            }
                            xhttp.open(`GET`,`example.json`,true);
                            xhttp.send();
                        

Egy pár példa az adatok felhasználására

Kik vannak benne?

Akár csinálhatunk belőle egy táblázatot is

Sőt kimutatásokat is csinálhatunk belőlük, összesen mennyit vettek az emberek

Módosítás

Miután beolvastuk a JSON fájlt, pontosan úgy viselkedik, mint egy bármilyen JavaScript-es változó. Így minden módosítást megejthetünk rajta, ilyen lehet az új adat felvétele, az adat módosítása, az adat törlése. Amire nagyon érdemes oda figyelni, hogy az új elem struktúrájának pontosan meg kell egyeznie a már beolvasott elemek struktúrájával, különben nem lesz egyértelmű az adatfolyam. Amennyiben a bent lévő adatot módosítjuk, akkor is figyelni kell a szerkezetre és nem mindegy, hogy objektummal vagy tömbbel dolgozunk.

Mentés

Amikor JSON fájlokkal dolgozunk, annak sokszor az a nagy előnye, hogy az adatokat magunkkal tudjuk vinni. Például egy API esetén letudjuk tölteni a JSON-t és fel tudjuk dolgozni az egy adott idő pillanatban lévő adatokat belőle. Ezt a funkcionalitást be tudjuk építeni a mi saját kis alkalmazásunkba is.

Ezt lényegében úgy tudjuk elérni külső könyvtárak használata nélkül, hogy létrehozunk egy virtuális linket, rákattintunk, rákattintunk (virtuálisan) és utána töröljük, hogy ne legyen útban.

Ahhoz, hogy ezt meg tudjuk csinálni, vissza kell alakítanunk a memóriában lévő adatokat szövegessé. Ezt a JSON.stringify() paranccsal tehetjük meg, ami a JavaScript objektumot szöveg formátummá alakítja.

Most már látjuk, hogy sikerült átalakítani szövegessé az objektumot, úgyhogy már csak meg kell csinálni a virtuális linkes trükköt.

Konkluzió

JSON előnye, hogy egy népszerű szabvány, API-k jelentős része ezzel az eszközzel vagy ezzel az eszközzel is kommunikál. Szemmel könnyedén olvasható és elég kicsi az alternatívákhoz képest, így egy rosszabb internet kapcsolattal is könnyedén használható. JavaScripttel lévő beolvasás után ugyanúgy kezelhető, mint egy JavaScript-es változó, majd ugyanilyen egyszerűséggel át lehet alakítani hordozható formátumúvá. Ezzel akár saját API-t is írhatunk, amit mások is könnyedén tudnak kezelni.