{
"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"]
}
{
"az": 1,
"nev": "Nagy János",
"telepules": "Szolnok",
"fizetes": 850000,
"vegzettsegek": ["festő","kőműves"],
"keszsegek": { "nyelvtudas":"angol", "ugyesseg":20 }
}
===== JSON JavaScriptben =====
==== JSON rövid példa JavaScriptben ====
JSON formátumban az egész JSON részt karaktersorozatként kell megadni.
const aru = '{ "name": "telefon", "price": 34150, "inStock": true }'
console.log(aru);
//Értelmezés JavaScriptként:
console.log(JSON.parse(aru));
==== JavaScript stílus ====
A JavaScriptben a kulcsokat nem stringként adjuk meg.
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));
==== JSON JavaScriptben másik példa ====
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;
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));
{{:oktatas:web:javascript:valid_not_valid.png|}}
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);
==== Tagok és tömbelemek ====
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);
==== Bejárás ====
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
==== Lekérés ====
app01/
`-src/
|-app.js
|-index.html
`-valami.json
[
{
"nev": "Béla",
"telepules": "Szeged"
},
{
"nev": "Teri",
"telepules": "Szolnok"
},
{
"nev": "Lajos",
"telepules": "Hatvan"
}
]
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();
Document
JSON
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
==== Tömb nevesítve ====
{
"dolgozok": [
{
"nev": "Béla",
"telepules": "Szeged"
},
{
"nev": "Teri",
"telepules": "Szolnok"
},
{
"nev": "Lajos",
"telepules": "Hatvan"
}
]
}
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:
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)
===== Fájl olvasása =====
projekt01/
|-node_modules/
|-app.js
|-dolgozok.json
|-index.html
|-package-lock.json
`-package.json
==== Beolvasás ====
fetch('dolgozok.json', {mode: 'no-cors'})
.then(response => response.text())
.then(data => {
console.log(JSON.parse(data))
})
Hibakezeléssel:
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()
==== Adattag ====
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 vs JavaScript =====
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;
}
}
===== Linkek =====
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/