JavaScript-JSON

JSON on datan tallennus- ja siirtoformaatti.

JSONia käytetään usein, kun dataa lähetetään palvelimelta verkkosivulle.

Mikä on JSON?

  • JSON tarkoittaa JavaScript Oobjekti Notation
  • JSON on kevyt tietovaihtoformaatti
  • JSON on riippumaton kielestä *
  • JSON on "itselleen kuvaavaa" ja helppoa ymmärtää

* JSON:n syntaksi on peräisin JavaScript-objektisymbolista, mutta JSON-muoto on puhtaa tekstiä. JSON-tietojen lukemiseen ja luomiseen voidaan käyttää koodia, joka on kirjoitettu millä tahansa ohjelmointikielellä.

JSON-esimerkki

JSON-grammatiikka määrittelee työntekijäobjektin: taulukon, joka sisältää kolme työntekijätietuetta (objektia):

JSON-esimerkki

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

JSON-muoto arvioidaan JavaScript-objektiksi

JSON-muoto on syntaksiltaan sama kuin JavaScript-objektin luomisen koodi.

Tämän samanlaisuuden vuoksi JavaScript-ohjelmat voivat helposti muuntaa JSON-tiedot paikalliseksi JavaScript-objektiksi.

JSON-grammatiikkasäännöt

  • Tiedot ovat nimi/arvo-pareja
  • Tiedot erotetaan pilkulla
  • Sulkeet säilyttävät objektit
  • Sulkeet säilyttävät taulukot

JSON-tiedot - nimet ja arvot

JSON-tietojen kirjoitusmuoto on nimi/arvo-pareja, samoin kuin JavaScript-objektin ominaisuudet.

Nimi/arvo-pareja muodostavat (kaksoisviivat sisällä) kenttien nimet, niiden jälkeen kolon ja sitten arvo:

"firstName":"Bill"

JSON-nimet vaativat kaksoisviivat. JavaScript-nimet eivät.

JSON objekti

JSON-objektit kirjoitetaan sulkeiden sisään.

Kuten JavaScriptissä, objektit voivat sisältää useita nimi/arvo-pareja:

{"firstName":"Bill", "lastName":"Gates"}

JSON taulukko

JSON-taulukot kirjoitetaan sulkeiden sisään.

Kuten JavaScriptissä, taulukot voivat sisältää objekteja:

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

Yllä olevassa esimerkissä "employees"-objekti on taulukko. Se sisältää kolme objektia.

Jokainen objekti edustaa yhden henkilön tietueen (nimi ja sukunimi).

Muunna JSON-teksti JavaScript-objektiksi

JSON:n yleinen käyttötapa on lukea tietoja verkkoserveristä ja näyttää ne verkkosivulla.

Yksinkertaisuuden vuoksi voidaan käyttää merkkijonoa esimerkkinä.

Ensimmäiseksi, luo JSON-syntaksin mukainen JavaScript-merkkijono:

var text = '{ "employees" : [
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

Kunnes, käytä JavaScriptin sisäänrakennettua JSON.parse()-funktiota muuntaaksesi tämän merkkijonon JavaScript-objektiksi:

var obj = JSON.parse(text);

Lopuksi, käytä tätä uutta JavaScript-objektia sivullasi:

Esimerkki

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script> 

Kokeile itse

Voit kokeilla omilla JSON-opas Lue lisää JSONista täältä.