JavaScript -JSON
JSON is een formaat voor het opslaan en transporteren van gegevens.
JSON wordt vaak gebruikt wanneer gegevens van een server naar een webpagina worden verzonden.
Wat is JSON?
- JSON staat voor Java S cript O bject N otering
- JSON is een lichtgewicht formaat voor gegevensuitwisseling
- JSON is taalonafhankelijk *
- JSON is "zelfbeschrijvend" en gemakkelijk te begrijpen
* De JSON-syntaxis is afgeleid van de JavaScript-syntaxis voor objectnotatie, maar de JSON-indeling is alleen tekst. Code voor het lezen en genereren van JSON-gegevens kan in elke programmeertaal worden geschreven.
JSON-voorbeeld
Deze JSON-syntaxis definieert een werknemersobject: een array van 3 werknemersrecords (objecten):
JSON-voorbeeld
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
Het JSON-formaat evalueert naar JavaScript-objecten
Het JSON-formaat is syntactisch identiek aan de code voor het maken van JavaScript-objecten.
Vanwege deze gelijkenis kan een JavaScript-programma eenvoudig JSON-gegevens converteren naar native JavaScript-objecten.
JSON-syntaxisregels
- Gegevens zijn in naam/waarde-paren
- Gegevens worden gescheiden door komma's
- Krullende accolades houden objecten vast
- Vierkante haken bevatten arrays
JSON-gegevens - een naam en een waarde
JSON-gegevens worden geschreven als naam/waarde-paren, net als JavaScript-objecteigenschappen.
Een naam/waarde-paar bestaat uit een veldnaam (tussen dubbele aanhalingstekens), gevolgd door een dubbele punt, gevolgd door een waarde:
"firstName":"John"
JSON-namen vereisen dubbele aanhalingstekens. JavaScript-namen niet.
JSON-objecten
JSON-objecten worden tussen accolades geschreven.
Net als in JavaScript kunnen objecten meerdere naam/waarde-paren bevatten:
{"firstName":"John", "lastName":"Doe"}
JSON-arrays
JSON-arrays worden tussen vierkante haken geschreven.
Net als in JavaScript kan een array objecten bevatten:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
In het bovenstaande voorbeeld is het object "employees" een array. Het bevat drie objecten.
Elk object is een record van een persoon (met een voornaam en een achternaam).
Een JSON-tekst converteren naar een JavaScript-object
Een veelgebruikt gebruik van JSON is om gegevens van een webserver te lezen en de gegevens op een webpagina weer te geven.
Voor de eenvoud kan dit worden gedemonstreerd met een string als invoer.
Maak eerst een JavaScript-tekenreeks met de JSON-syntaxis:
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
Gebruik vervolgens de ingebouwde JavaScript-functie JSON.parse()om de tekenreeks om te zetten in een JavaScript-object:
const obj = JSON.parse(text);
Gebruik ten slotte het nieuwe JavaScript-object op uw pagina:
Voorbeeld
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
U kunt meer lezen over JSON in onze JSON-tutorial .