JavaScript JSON

JSON är ett format för lagring och överföring av data.

JSON används ofta när data skickas från server till webbsida.

Vad är JSON?

  • JSON betyder JjavaSskript Oobjekt Notation
  • JSON är ett lättviktigt datautbytesformat
  • JSON är oberoende av språk *
  • JSON är "self-describing" och lätt att förstå

* JSON:s syntax är från JavaScript-objektsnotationen, men JSON-formatet är rent text. Läs- och genereringskod för JSON-data kan skrivas i vilket programmeringsspråk som helst.

JSON-exempel

JSON-syntax definierar en anställdsobjekt: en array (objekt) som innehåller tre anställningsposter:

JSON-exempel

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

JSON-formatet utvärderas som JavaScript-objekt

JSON-formatet är grammatiskt identiskt med koden för att skapa JavaScript-objekt.

På grund av denna likhet kan JavaScript-program enkelt konvertera JSON-data till lokala JavaScript-objekt.

JSON-syntaxregler

  • Data är namn/värdepar
  • Data är avskilda med kommatecken
  • Parenteser behåller objekt
  • Klamrar behåller arrayer

JSON-data - namn och värde

JSON-data skrivs i form av namn/värdepar, liknande JavaScript-objektets egenskaper.

Namn/värdepar består av (dubbla citattecken inom) fältnamn, följt av kolon, och sedan värde:

"firstName":"Bill"

JSON-namn behöver dubbla citattecken. JavaScript-namn behöver inte det.

JSON-objekt

JSON-objekt skrivs inom curly parenteser.

Liksom JavaScript kan ett objekt innehålla flera namn/värdepar:

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

JSON-array

JSON-array skrivs inom klamrar.

Liksom JavaScript kan en array innehålla objekt:

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

I det föregående exemplet är objektet "employees" en array. Den innehåller tre objekt.

Varje objekt representerar en persons post (med namn och efternamn).

Konvertera JSON-text till JavaScript-objekt

JSON:s vanliga användning är att läsa data från en webbserver och sedan visa data på en webbsida.

För enkelhetens skull kan vi använda en sträng som inmatning för demonstration.

Först skapar vi en JavaScript-sträng med JSON-syntax:

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

Använd JavaScripts inbyggda funktion JSON.parse() för att konvertera denna sträng till ett JavaScript-objekt:

var obj = JSON.parse(text);

Slutligen, använd denna nya JavaScript-objekt på din sida:

Exempel

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

Prova själv

Du kan prova vår JSON-instruktion Läs mer om JSON på denna sida.