JavaScript JSON


Innehållsförteckning

    Visa innehållsförteckning


JSON är ett format för att lagra och transportera data.

JSON används ofta när data skickas från en server till en webb sida.


Vad är JSON?

  • JSON står för JavaScript Object Notation

  • JSON är ett lättviktsformat för datautbyte

  • JSON är språkoberoende *

  • JSON är "självbeskrivande" och lätt att förstå

* JSON-syntaxen härleds från JavaScript-objektnotationssyntax, men JSON-formatet är endast text. Kod för att läsa och generera JSON-data kan skrivas i valfri programmering språk.


JSON-exempel

Den här JSON-syntaxen definierar ett anställdas objekt: en array med 3 anställdas poster (objekt):

JSON-exempel

{
"employees":[
  {"firstName":"John", "lastName":"Doe"}, 
  {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

JSON-formatet utvärderas till JavaScript-objekt

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

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


JSON-syntaxregler

  • Data är i namn/värdepar

  • Data separeras med kommatecken

  • Lockiga hängslen håller föremål

  • Hakparenteser håller arrayer



JSON-data - ett namn och ett värde

JSON-data skrivs som namn/värdepar, precis som JavaScript-objekt egenskaper.

Ett namn/värdepar består av ett fältnamn (i dubbla citattecken), följt av ett kolon, följt av ett värde:

"firstName":"John"

JSON-namn kräver dubbla citattecken. JavaScript-namn gör det inte.


JSON-objekt

JSON-objekt skrivs inuti lockiga hängslen.

Precis som i JavaScript kan objekt innehålla flera namn/värdepar:

{"firstName":"John", "lastName":"Doe"}

JSON-arrayer

JSON-matriser skrivs inom hakparenteser.

Precis som i JavaScript kan en array innehålla objekt:

"employees":[
   
{"firstName":"John", "lastName":"Doe"}, 
   
{"firstName":"Anna", "lastName":"Smith"}, 
   
{"firstName":"Peter", "lastName":"Jones"}
]

I exemplet ovan är objektet "anställda" en array. Den innehåller tre föremål.

Varje objekt är ett register över en person (med ett förnamn och ett efternamn).


Konvertera en JSON-text till ett JavaScript-objekt

En vanlig användning av JSON är att läsa data från en webbserver, och visa data på en webbsida.

För enkelhetens skull kan detta demonstreras med en sträng som indata.

Skapa först en JavaScript-sträng som innehåller JSON-syntax:

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Använd sedan den inbyggda JavaScript-funktionen JSON.parse() för att konvertera strängen till ett JavaScript-objekt:

const obj = JSON.parse(text);

Använd slutligen det nya JavaScript-objektet 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 →

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

Du kan läsa mer om JSON i vår JSON-handledning.