szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== JSON ======

  * **Szerző:** Sallai András
  * Copyright (c) 2013, Sallai András
  * Szerkesztve: 2013, 2014, 2015, 2017, 2021, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu
===== 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:
  * http://json.org/
  * http://json.org/json-hu.html

===== 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 | <nowiki>"alma"  "Pala Ernő" "a"</nowiki> |
| boolean | true, false |
| array  | <nowiki>[3, 8, 5]   ["alma", "körte"]</nowiki> |
| object | <nowiki>{"name":"János"} {"kor":42} </nowiki> |
| null | null |

===== Szabályok =====

  * Kulcs-érték párokat használunk <nowiki>{"kulcs": "érték"}</nowiki>
  * 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 =====

Szám:
<code json>
{
    "kor": 56
}
</code>


Karakterlánc:
<code json>
{
    "nev": "Nagy József"
}
</code>

Logikai típus:
<code json>
{
    "van_jogosítvány": true
}
</code>

Tömb:
<code json>
{
    "gyümölcsök": ["alma", "körte", "barack", "szilva"]
}
</code>

Több adat:
<code json>
{
    "vezetéknév": "Nagy",
    "keresztnév": "János"
}
</code>

Objektumok:
<code json>
{
    "janos": {
        "nev": "Nagy János"
    },
    "lajos": {
        "nev": "Para Lajos"
    },
    "istvan": {
        "nev": "Erős István"
    }
}
</code>


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



<code javascript dolgozok.json>
{
    "az": 1,
    "nev": "Nagy János",
    "telepules": "Szolnok",
    "fizetes": 850000,
    "vegzettsegek": ["festő","kőműves"],
    "keszsegek": { "nyelvtudas":"angol", "ugyesseg":20 }
}
</code>

===== JSON JavaScriptben =====





==== JSON rövid példa JavaScriptben ====

JSON formátumban az egész JSON részt karaktersorozatként kell megadni. 
<code javascript app.js>
const aru = '{ "name": "telefon", "price": 34150, "inStock": true }'

console.log(aru);
//Értelmezés JavaScriptként:
console.log(JSON.parse(aru));
</code>

==== JavaScript stílus ====


A JavaScriptben a kulcsokat nem stringként adjuk meg.
<code javascript 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));
</code>

==== JSON JavaScriptben másik példa ====

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

Az eval függvény segítségével JavaScript objektummá alakítható.
<code javascript>
let obj = eval ("(" + txt + ")");
</code>

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

<code javascript>
document.getElementById("az").innerHTML = obj.dolgozok[1].kerNev;
</code>




<html>
<div id="tesztdoboz" style="border-style: solid; border-width: 1px; border-color: blue; border-radius: 5px; padding: 5px; display: inline-block;">
<div id="doboz"></div>
Válasszon dolgozó. Dolgozó szám (0-2):<input type="text" id="szam" size=4><br>
<button onclick="mutat()">Mutat</button>

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

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

function mutat() {
    let szam = document.getElementById("szam").value;
    if(szam == "") szam=1;
    document.getElementById("doboz").innerHTML = obj.dolgozok[szam].kerNev;
}
</script>
</div>
</html>

===== JSON validálás =====

==== Linuxon ====

  apt install python-demjson

Használható parancs:
  /usr/bin/jsonlint-py

==== Online ====

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

==== 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ó =====

  * 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



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


<code javascript>
var dolgozo = {
    name: "Béla"
}
console.log(dolgozo);
</code>

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:
<code javascript>
var dolgozo = {
    "name": "Béla"
}
console.log(dolgozo);
</code>


É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:

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


{{:oktatas:web:javascript:valid_not_valid.png|}}


A JSON.parse() függvény visszaalkaítja a JavaScript formára:
<code javascript>
var szemely = {
    "nev": "Béla",
    "kor": 43
}
var tmp = JSON.stringify(szemely);
var new_szemely = JSON.parse(tmp);
console.log(new_szemely);

</code>

==== Tagok és tömbelemek ====

<code javascript>
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);        
</code>

==== Bejárás ====

<code javascript>
var dolgozok = [
    {
        nev: "Béla",
        telepules: "Szeged"
    },
    {
        nev: "Teri",
        telepules: "Szolnok"
    },
    {
        nev: "Lajos",
        telepules: "Hatvan"
    }
];

dolgozok.forEach( dolgozo => {
    console.log(dolgozo.nev)
}) 
</code>


for ciklussal:
<code javascript>
for(var i=0; i<dolgozok.length; i++){
    console.log(dolgozok[i].nev)
}
</code>

==== Lekérés ====

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


<code javascript valami.json>
[
    {
        "nev": "Béla",
        "telepules": "Szeged"
    },
    {
        "nev": "Teri",
        "telepules": "Szolnok"
    },
    {
        "nev": "Lajos",
        "telepules": "Hatvan"
    }
]
</code>

<code javascript 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();
</code>

<code html 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>
</code>

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 ====

<code javascript valami.json>
{
    "dolgozok": [
        {
            "nev": "Béla",
            "telepules": "Szeged"
        },
        {
            "nev": "Teri",
            "telepules": "Szolnok"
        },
        {
            "nev": "Lajos",
            "telepules": "Hatvan"
        }
    ]
}
</code>


<code javascript 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();
</code>


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:

<code javascript 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();
</code>

Így akár hivatkozhatok a nev vagy a telepules tagokra. 
<code javascript>
console.log(res.dolgozok[0].nev)
</code>

===== Fájl olvasása =====


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


==== Beolvasás ====


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


Hibakezeléssel:
<code javascript 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)
})
</code>

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

==== Adattag ====


<code javascript 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)
})
</code>

===== JSON vs JavaScript =====

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

JSON:
<code javascript>
{
  "name": "Para Béla"
}
</code>


JavaScript:
<code javascript>
{
  name: "Para Béla"
}
</code>



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:
<code javascript>
{
  name: "Para Béla",
  getName: function() {
      return this.name;
  }
}
</code>

===== 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/