JavaScript JSON

JSON is een formaat voor het opslaan en verzenden van gegevens.

JSON wordt vaak gebruikt wanneer gegevens van een server naar een webpagina worden verzonden.

Wat is JSON?

  • JSON betekent JavaScript Object Nnotation
  • JSON is een lichtgewicht data-uitwisselingsformaat
  • JSON is onafhankelijk van de taal *
  • JSON is "zelfbeschrijvend" en gemakkelijk te begrijpen

* De syntaxis van JSON is afkomstig van de syntaxis van JavaScript-objecten, maar het JSON-formaat is puur tekst. Code voor het lezen en genereren van JSON-gegevens kan in elke programmeertaal worden geschreven.

JSON-voorbeeld

JSON-syntaxis definieert een employe-object: een array van drie employeerecords (objecten):

JSON-voorbeeld

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

JSON-formaat wordt geëvalueerd als JavaScript-object

JSON-formaat is syntactisch gelijk aan de code voor het aanmaken van JavaScript-objects.

Vanwege deze vergelijkbaarheid kunnen JavaScript-programma's JSON-gegevens eenvoudig converteren naar lokale JavaScript-objects.

JSON-syntaxisregels

  • Gegevens zijn naam/waardeparen
  • Gegevens worden gescheiden door komma's
  • Haakjes behouden het object
  • Haakjes behouden de array

JSON-gegevens - Namen en waarden

JSON-gegevens worden geschreven in naam/waardeparen, vergelijkbaar met eigenschappen van een JavaScript-object.

Naam/waardeparen bestaan uit een veldnaam in aanhalingstekens, gevolgd door een komma, gevolgd door de waarde:

"firstName":"Bill"

JSON-namen moeten dubbele aanhalingstekens bevatten. JavaScript-namen hoeven dit niet te doen.

JSON Objecten

JSON-objecten worden geschreven binnen haakjes.

Net als JavaScript, kunnen objecten meerdere naam/waardeparen bevatten:

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

JSON Arrays

JSON-arrays worden geschreven in rechte haken.

Net als JavaScript, kunnen arrays objecten bevatten:

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

In het bovenstaande voorbeeld is het object "employees" een array. Het bevat drie objecten.

Elk object vertegenwoordigt een record van een persoon (met naam en achternaam).

Converteer JSON-tekst naar een JavaScript-object

Het gebruikelijke gebruik van JSON is om gegevens van een webserver te lezen en deze vervolgens weer te geven op een webpagina.

Voor eenvoudigheid kan een string als invoer worden gebruikt om te demonstreren.

Eerst, maak een JavaScript-tekst met JSON-syntaxis aan:

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

Gebruik vervolgens de ingebouwde JavaScript-functie JSON.parse() om deze string te converteren naar een JavaScript-object:

var obj = JSON.parse(text);

Tot slot, gebruik deze nieuwe JavaScript-object in uw pagina:

Voorbeeld

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

Probeer het zelf

U kunt het proberen in onze JSON handleiding Lees meer over JSON in het midden.