jQuery index oldalra

jQuery $.getJSON() példa



Fontos:
A jQuery 1.4-től kezdve, ha a JSON-fájl szintaktikai hibát tartalmaz, a kérés általában csendben meghiúsul.
Emiatt kerülje a JSON-adatok gyakori kézi szerkesztését.
A JSON egy adatcsere-formátum, amelynek szintaktikai szabályai szigorúbbak, mint a JavaScript objektumliterális jelölései.
Például a JSON-ban megjelenített összes karakterláncot, akár tulajdonságról, akár értékről van szó, dupla idézőjelek közé kell tenni.


A JSON-formátum, JavaScript-objektumokat értékel.
Szintaktikailag megegyezik a JavaScript objektumok létrehozásához használt kóddal.
Hasonlóság miatt, a JavaScript-programok könnyen konvertálhatják a JSON-adatokat natív, JavaScript-objektumokká.

JSON szintaktikai szabályok:
Az adatok név/érték párokban vannak.
Az adatok vesszővel vannak elválasztva.
A kapcsos zárójelek, témákat, rekordokat tartalmaznak. (Ha egy tárgy, vagy személy azonosításához, több adat is tartozik.)
A szögletes zárójelek, tömböket tartanak.


JSON-szintaxis minták:

1.Minta.

{
  "egy": "Szabó Ferenc ---- Beosztása = Ruhaszabó",
  "kettő": "Kertész János ---- Beosztása = Kertépítő",
  "három": "Kovács Anna ---- Beosztása = Cukrász",
  "négy": "Jakab Péter ---- Beosztása = Pék"
}

2.Minta. (4 alkalmazotti rekordból (objektumból) álló tömb.)

{
"alkalmazottak":[
  {"firstName":"Ferenc", "lastName":"Szabó"},
  {"firstName":"János", "lastName":"Kertész"},
  {"firstName":"Anna", "lastName":"Kovács"},
  {"firstName":"Peter", "lastName":"Jakab"}
]
}





$.getJSON() példa.

A "scrip" és tartalma, külső "json" kiterjesztésű fájlban van.
Tartalom kiíratása, a "body" területén, és általunk kiválasztott elme területén jelenik meg.

Megjegyzés:
Otthon történő tesztelésnél.

Ha ezt a JSON fájlt egyszer lekérdeztük, majd módosítottuk tartalmát, és ismét lekérdezzük,
előfordulhat, hogy az eredeti tartalom jelenik meg, a módosított helyett.
Ekkor a böngészőt be kell zárni, és újból megnyitni, hogy a módosított tartalmat kapjuk vissza.

json_pelda.json
Ezt a json kiterjesztésű fájlt, a "mintak" nevű mappába helyezzük el, a következő tartalommal.


{
  "egy": "Szabó Ferenc ---- Beosztása = Ruhaszabó",
  "kettő": "Kertész János ---- Beosztása = Kertépítő",
  "három": "Kovács Anna ---- Beosztása = Cukrász",
  "négy": "Jakab Péter ---- Beosztása = Pék"
}

<head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#btn_json").click(function(){
	
        $.getJSON("mintak/json_pelda.json", function(result){
               $("#jsondiv").html(" ");                  // Ez nem kötelező. De, megakadályozza az ismétlődő kiíratásokat.
		   
                   $.each(result, function(i, field){
                      $("#jsondiv").append(i +": "+ field + " <br>");
                   });
          });
    });
});
</script>
</head>

<body>

      <button id="btn_json">Get JSON adat. Katt ide.</button>
  
      <p>Lekérdezési adatok:</p>
      <div id="jsondiv"></div>                      <!--   Lekérdezett tartalom, ezen a div elem területén jelenik meg.   -->
  
</body>

Lekérdezési adatok:










$.getJSON() tömb példa.

A "scrip" és tartalma, külső "json" kiterjesztésű fájlban van.
Tartalom kiíratása, a "body" területén, és általunk kiválasztott elme területén jelenik meg.

Megjegyzés: Otthon történő tesztelésnél.
Ha ezt a fájlt egyszer lekérdeztük, majd módosítottuk tartalmát, és ismét lekérdezzük,
előfordulhat, hogy az eredeti tartalom jelenik meg, a módosított helyett.
Ekkor a böngészőt be kell zárni, és újból megnyitni, hogy a módosított tartalmat kapjuk vissza.

json_tombpelda.json
Ezt a json kiterjesztésű fájlt, a "mintak" nevű mappába helyezzük el, a következő tartalommal.


{
"alkalmazottak":[
  {"firstName":"Ferenc", "lastName":"Szabó", "beosztasa":"Ruhaszabó"},
  {"firstName":"János", "lastName":"Kertész", "beosztasa":"Kertépítő"},
  {"firstName":"Anna", "lastName":"Kovács", "beosztasa":"Cukrász"},
  {"firstName":"Gábor", "lastName":"Jakab", "beosztasa":"Lakatos"}
]
}

<head>
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#btn_jsontomb").click(function(){
        $.getJSON("mintak/json_tombpelda.json", function(data){
		          $("#jsontombdiv").html(" ");           // Ez nem kötelező. De, megakadályozza az ismétlődő kiíratásokat.
				  
                   $.each(data, function(key, val){
				   $("#jsontombdiv").append("<strong>"+ key +" </strong><br>");          // Kiíratjuk a tömb nevét.
                         let text = "";
                             val.forEach(myFunction);
                             document.getElementById("jsontombdiv").innerHTML += text;
							 
                          function myFunction(elem, index) {
                               text+= index + ": " + elem["lastName"] +" "+ elem["firstName"] +" --- "+ elem["beosztasa"] + "<br>";						  
                            }
                    });
            });
    });
});
</script>
</head>
<body>

  <button id="btn_jsontomb">Get JSON tömb adat. Katt ide.</button>
  
  <p>Lekérdezési adatok:</p>
  <div id="jsontombdiv"></div>                      <!-- Lekérdezett tartalom, ezen a div elem területén, jelenik meg. -->
  
</body>


Lekérdezési adatok:










    Ez a json példa,
    közvetlen a html fájlban íródik.

    A "scrip" és tartalma a "szövegfolyam" területén van.
    Tartalom kiíratása, a "body" területén, és általunk kiválasztott elem területén jelenik meg.

    JSON-szöveg konvertálása JavaScript-objektummá.
    A JSON gyakori használata a webszerverről származó adatok beolvasása, és az adatok weboldalon való megjelenítése.
    Példában a szemléltetés, egy karakterlánc bemeneti használatával történik.
    

    <body>
    <p id="jsondemo"> </p>
    <p>Teljes tartalom: <br> <span id="jsondemotomb"> </span> </p>
    
    <script>
    // Először hozzunk létre egy JSON-szintaxist tartalmazó, JavaScript-sztringet:
    let text = '{ "alkalmazottak" : [' +
     '{ "firstName":"Ferenc" , "lastName":"Szabó"  , "szakma":"Ruhaszabó" },' +
     '{ "firstName":"János" , "lastName":"Kertész"  , "szakma":"Kertépítő" },' +
     '{ "firstName":"Anna" , "lastName":"Kovács"  , "szakma":"Cukrász"  },' +
     '{ "firstName":"Péter" , "lastName":"Jakab"  , "szakma":"Pék"  } ] }';
    
    // Ezután a beépített JavaScript függvény, JSON.parse() segítségével, konvertálja a karakterláncot JavaScript objektummá:
    const obj = JSON.parse(text);
    
    // Most már használhatjuk az új JavaScript objektumot, az oldalon:
    // Egy kiválasztott adatait kérdezzük le.:
    document.getElementById("jsondemo").innerHTML = obj.alkalmazottak[1].firstName + " " + obj.alkalmazottak[1].lastName;
    
    
    // Teljes tartalom adatait is, lekérdezhetjük:
    for(i=0; i<4; i++){
    document.getElementById("jsondemotomb").innerHTML += "Neve = "+obj.alkalmazottak[i].lastName + 
    " " + obj.alkalmazottak[i].firstName + " ---- Beosztása = " + obj.alkalmazottak[i].szakma + "<br>";
    }
    
    </script>
    
    </body>
    

    Fenti program lekért adata, itt jelenik meg.

    Teljes tartalom: