• Szerző: Sallai András
• Copyright © 2013, Sallai András
• Szerkesztve: 2013, 2014, 2015, 2017, 2021, 2023
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

A JSON a JavaScript Object Notation rövidítése. Szöveges szabvány egyszerű adatstruktúrák leképezésére. Valójában asszociatív tömböket valósítunk meg. A JavaScript nyelvhez találták ki, de ma már más nyelveken is létezik értelmező. A létrehozás célja volt az ember számára is könnyen olvasható formátum létrehozása.

Ejtése: (/ˈdʒeɪsɒn/ jay-soun, /ˈdʒeɪsən/ jay-son)

A formátumot Douglas Crockford írja le. Az RFC 4627 szabványban van megadva.

Weblap:

• http://json.org/
• http://json.org/json-hu.html

• Number - nincs külön egész és valós
• String - Egy Unicode karaktersorozat, idézőjelben
• Boolean - true vagy false
• Array - számozott lista; 0 vagy több értékkel
• Object - számozatlan lista; kulcs - érték párok
• Null - üres érték

• Kulcs-érték párokat használunk {"kulcs": "érték"}
• A kulcsot és az értéket idézőjelbe tesszük.
• A számértékek esetén elhagyható az idézőjel.
• A tömb értékeknek nem szükséges kulcs.

A JSON fájlok kiterjesztése:

.json

MIME típus: Application/json

Szám:

{
    "kor": 56
}

Karakterlánc:

{
    "nev": "Nagy József"
}

Logikai típus:

{
    "van_jogosítvány": true
}

Tömb:

{
    "gyümölcsök": ["alma", "körte", "barack", "szilva"]
}

Több adat:

{
    "vezetéknév": "Nagy",
    "keresztnév": "János"
}

Objektumok:

{
    "janos": {
        "nev": "Nagy János"
    },
    "lajos": {
        "nev": "Para Lajos"
    },
    "istvan": {
        "nev": "Erős István"
    }
}

{
	"name": "Para Béla",
	"salary": 2820000,
	"address": {
		"city": "Szolnok",
		"street": "Nyár utca 15."
	},
	"qualifications": ["hajóvezető", "darus"]
}

dolgozok.json

{
    "az": 1,
    "nev": "Nagy János",
    "telepules": "Szolnok",
    "fizetes": 850000,
    "vegzettsegek": ["festő","kőműves"],
    "keszsegek": { "nyelvtudas":"angol", "ugyesseg":20 }
}

JSON formátumban az egész JSON részt karaktersorozatként kell megadni.

app.js

const aru = '{ "name": "telefon", "price": 34150, "inStock": true }'
 
console.log(aru);
//Értelmezés JavaScriptként:
console.log(JSON.parse(aru));

A JavaScriptben a kulcsokat nem stringként adjuk meg.

app.js

let txt = { 
    dolgozok : [
        { kerNev: "Joska", vezNev: "Nagy" },
        { kerNev: "Andrea", vezNev: "Kovács" },
        { kerNev: "Lajos", vezNev: "Szabó" }
    ]
}
 
console.log(txt);
//Sztringesítjük a JavaScript adatokat:
console.log(JSON.stringify(txt));

let txt = '{ "dolgozok" : [' +
'{ "kerNev":"Joska" , "vezNev":"Nagy" },' +
'{ "kerNev":"Andrea" , "vezNev":"Kovács" },' +
'{ "kerNev":"Lajos" , "vezNev":"Szabó" } ]}';

Az eval függvény segítségével JavaScript objektummá alakítható.

let obj = eval ("(" + txt + ")");

Ezt követően le tudom kérdezni az egyes részeit:

document.getElementById("az").innerHTML = obj.dolgozok[1].kerNev;

apt install python-demjson

Használható parancs:

/usr/bin/jsonlint-py

• http://jsonlint.com/
• http://codebeautify.org/jsonvalidate

Telepítjük:

npm install --global jsonlint

Majd a használat:

jsonlint valami.json

Vagy projekthez:

npm install --save-dev jsonlint

Majd a használat:

npx jsonlint valami.json

• https://jsonplaceholder.typicode.com/
  • https://jsonplaceholder.typicode.com/posts
  • https://jsonplaceholder.typicode.com/users/
• https://gorest.co.in/
• https://gist.github.com/
  • https://gist.github.com/andteki
• https://reactnative.dev/movies.json
• https://api.github.com/users/facebook/repos

Ha JavaScriptben használom a JSON-t a kulcsot nem teszem idézőjelek közzé:

var dolgozo = {
    name: "Béla"
}
console.log(dolgozo);

Ez azonban nem érvényes JSON formátum, de JavaScriptben így használjuk.

Ha érvényes módon a kulcsot idézőjelek közzé teszem, így is használhatom:

var dolgozo = {
    "name": "Béla"
}
console.log(dolgozo);

Érvényes formára hozhatjuk a JSON adatainkat a JSON.stringify() függvény segítségével.

Figyeljük meg a következő program kimenetét:

var szemely = {
    nev: "Béla",
    kor: 43
}
console.log(szemely);
console.log(JSON.stringify(szemely));

A JSON.parse() függvény visszaalkaítja a JavaScript formára:

var szemely = {
    "nev": "Béla",
    "kor": 43
}
var tmp = JSON.stringify(szemely);
var new_szemely = JSON.parse(tmp);
console.log(new_szemely);

var dolgozo = {
    nev: "Csenge Béla",
    kor: 43,
    vegzettsegek: ["gépész", "lakatos"],
    cim: {
        telepules: "Szeged",
        utca: "Nyár utca 15."
    }
}
console.log(dolgozo.vegzettsegek[1]);
console.log(dolgozo.cim.telepules);        

var dolgozok = [
    {
        nev: "Béla",
        telepules: "Szeged"
    },
    {
        nev: "Teri",
        telepules: "Szolnok"
    },
    {
        nev: "Lajos",
        telepules: "Hatvan"
    }
];
 
dolgozok.forEach( dolgozo => {
    console.log(dolgozo.nev)
}) 

for ciklussal:

for(var i=0; i<dolgozok.length; i++){
    console.log(dolgozok[i].nev)
}

app01/
  `-src/
     |-app.js
     |-index.html
     `-valami.json

valami.json

[
    {
        "nev": "Béla",
        "telepules": "Szeged"
    },
    {
        "nev": "Teri",
        "telepules": "Szolnok"
    },
    {
        "nev": "Lajos",
        "telepules": "Hatvan"
    }
]

app.js

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(xhr.responseText)
        }
    }    
    xhr.open("GET", "valami.json", true);
    xhr.send();

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>JSON</h1>
    <script src="app.js"></script>
</body>
</html>

Ha elkészültek az állományok, futtassuk egy szerveren a weblapot. Például:

npm install --save-dev lite-server
lite-server --baseDir=src

valami.json

{
    "dolgozok": [
        {
            "nev": "Béla",
            "telepules": "Szeged"
        },
        {
            "nev": "Teri",
            "telepules": "Szolnok"
        },
        {
            "nev": "Lajos",
            "telepules": "Hatvan"
        }
    ]
}

app.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhr.responseText;
        console.log(response)
    }
}    
xhr.open("GET", "valami.json", true);
xhr.send();

Ha most megpróbálok a dolgozok-ra hivatkozni, hibát kapok.

console.log(response.dolgozok)

Alakítsuk át a response tartalmát JSON.parse() függvénnyel:

app.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhr.responseText;
        var res = JSON.parse(response);
        console.log(res.dolgozok)
    }
}    
xhr.open("GET", "valami.json", true);
xhr.send();

Így akár hivatkozhatok a nev vagy a telepules tagokra.

console.log(res.dolgozok[0].nev)

projekt01/
  |-node_modules/
  |-app.js
  |-dolgozok.json
  |-index.html
  |-package-lock.json
  `-package.json

app.js

fetch('dolgozok.json', {mode: 'no-cors'})
.then(response => response.text())
.then(data => {
    console.log(JSON.parse(data))
})

Hibakezeléssel:

app.js

fetch('dolgozok.json', {mode: 'no-cors'})
.then(response => response.text())
.then(data => {
    console.log(JSON.parse(data))
})
.catch(error => {
    console.log('Hiba: ' + error)
})

Próbáljuk ki. Írjuk át a response.text() utasítást például így:

response.aatext()

app.js

fetch('dolgozok.json', {mode: 'no-cors'})
.then(response => response.text())
.then(data => {
    let dolgozo = JSON.parse(data)
    console.log(dolgozo.name )
    console.log(dolgozo['name'] )
})
.catch(error => {
    console.log('Hiba: ' + error)
})

JSON-ban a kötelező a kulcsokat idézőjelben megadni.

JSON:

{
  "name": "Para Béla"
}

JavaScript:

{
  name: "Para Béla"
}

A JSON értékei a következő típusúak lehetnek:

• karakterlánc
• szám
• objekt
• tömb
• logikai
• null

A JavaScriptben viszont bármilyen érvényvényes JavaScript struktúra lehet. JavaScriptben lehet például függvény. JSON-ban nem.

JavaScriptben lehet:

{
  name: "Para Béla",
  getName: function() {
      return this.name;
  }
}

Konvertálási lehetőségek online:

• https://csvjson.com/csv2json (2023)
• https://www.convertsimple.com/convert-json-to-javascript/ (2023)
• https://tableconvert.com/json-to-sql (2024)

Érvényesség:

• http://jsonlint.com/