Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_json

< JavaScript

JSON

  • Szerző: Sallai András
  • Copyright © Sallai András, 2013, 2014, 2015, 2017, 2021
  • Licenc: GNU Free Documentation License 1.3

A JSON

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:

Típusok

  • 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
number 5 -8 3.7 1.8e8
string „alma” „Pala Ernő” „a”
boolean true, false
array [3, 8, 5] [„alma”, „körte”]
object {„name”:„János”} {„kor”:42}
null null

Szabályok

  • 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

JSON példák

{
    "kor": 56
}
{
    "nev": "Nagy József"
}
{
    "van_jogosítvány": true
}
{
    "gyümölcsök": ["alma", "körte", "barack", "szilva"]
}
{
    "vezetéknév": "Nagy",
    "keresztnév": "János"
}
{
    "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 JavaScriptben

JSON rövid példa JavaScriptben

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);
console.log(JSON.parse(aru));

JavaScript stílus

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);
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;

Válasszon dolgozó. Dolgozó szám (0-2):

JSON validálás

Linuxon

apt install python-demjson

Használható parancs:

/usr/bin/jsonlint-py

Online

npm csomag

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

JSON kiszolgáló

JSON JavaScriptben

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);

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<dolgozok.length; i++){
    console.log(dolgozok[i].nev)
}

Lekérés

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

Tömb nevesítve

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)

Fájl olvasása

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

Beolvasás

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()

Adattag

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 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;
  }
}
oktatas/web/javascript/javascript_json.txt · Utolsó módosítás: 2021/12/17 07:06 szerkesztette: admin