JavaScript JSON

Indholdsfortegnelse

JSON er et format til lagring og transport af data.

JSON bruges ofte, når data sendes fra en server til et web side.

Hvad er JSON?

JSON står for JavaScript Object Notation
JSON er et let dataudvekslingsformat
JSON er sproguafhængig *
JSON er "selv-beskrivende" og let at forstå

* JSON-syntaksen er afledt af JavaScript-objektnotationssyntaks, men JSON-formatet er kun tekst. Kode til læsning og generering af JSON-data kan skrives i enhver programmering Sprog.

JSON eksempel

Denne JSON-syntaks definerer et medarbejderobjekt: en matrix af 3 medarbejderposter (objekter):

JSON eksempel

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

JSON-formatet evalueres til JavaScript-objekter

JSON-formatet er syntaktisk identisk med koden til oprettelse JavaScript-objekter.

På grund af denne lighed, et JavaScript-program kan nemt konvertere JSON-data til native JavaScript-objekter.

JSON syntaksregler

Data er i navn/værdi-par
Data er adskilt med kommaer
Krøllede seler holder genstande
Firkantede parenteser holder arrays

JSON-data - et navn og en værdi

JSON-data skrives som navn/værdi-par, ligesom JavaScript-objekt ejendomme.

Et navn/værdi-par består af et feltnavn (i dobbelte anførselstegn), efterfulgt af et kolon, efterfulgt af en værdi:

"firstName":"John"

JSON-navne kræver dobbelte anførselstegn. JavaScript-navne gør det ikke.

JSON-objekter

JSON-objekter er skrevet inden for krøllede klammeparenteser.

Ligesom i JavaScript kan objekter indeholde flere navn/værdi-par:

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

JSON-arrays

JSON-arrays er skrevet inden for firkantede parenteser.

Ligesom i JavaScript kan et array indeholde objekter:

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

I eksemplet ovenfor er objektet "medarbejdere" et array. Den indeholder tre genstande.

Hvert objekt er en registrering af en person (med et fornavn og et efternavn).

Konvertering af en JSON-tekst til et JavaScript-objekt

En almindelig brug af JSON er at læse data fra en webserver, og vise dataene på en webside.

For nemheds skyld kan dette demonstreres ved hjælp af en streng som input.

Først skal du oprette en JavaScript-streng, der indeholder JSON-syntaks:

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

Brug derefter den indbyggede JavaScript-funktion JSON.parse() til at konvertere strengen til et JavaScript-objekt:

const obj = JSON.parse(text);

Brug endelig det nye JavaScript-objekt på din side:

Eksempel

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

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

Prøv det selv →

<!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æse mere om JSON i vores JSON-tutorial.