JSON

Letterlijke notatie in JavaScript

Literals worden in programmeertalen gebruikt om letterlijk vaste waarden uit te drikkeln, zoals de constante gehele waarde van 4 of de tekenreeks "Hallo Wereld". Literals kunnen worden gebruikt in de meeste talen waar een expressie is toegestaan, als onderdeel van een voorwaarde in een controle-statement, een invoerparameter bij het aanroepen van een functie, in een variabeletoekenning, enzovoort. Bijvoorbeeld, de volgende C # en Visual Basic code initialiseert de variabele x met de constante integerwaarde 42.

int x = 42; // C#
Dim x As Integer = 42 ' Visual Basic

Verschillende programmeertalen beschikken over literals van verschillende types. De meeste programmeertalen ondersteunen minstens literals voor scalaire types zoals integers, floating-point getallen, strings, en Boolean. Maar in JavaScript worden naast scalaire types, ook literals ondersteunt voor gestructureerde types zoals arrays en objecten. Dat maakt on-demand creatie en initialisatie van arrays en objecten mogelijk.

Array literals in JavaScript bestaan uit nul of meer expressies, waarbij elke expressie een element van de array voorsteldt. De array-elementen staan tussen vierkante haakjes ([]) en zijn gescheiden door komma's. Het volgende voorbeeld definieert een literal array met zeven string-elementen met daarin de namen van de zeven continenten:

var continents = ["Europe", "Asia", "Australia", "Antarctica", "North
 America", "South America", "Africa"];
alert(continents[0] + " is one of the " + continents.length + "
 continents.");

var continents = new Array();
continents[0] = "Europe";
continents[1] = "Asia";
continents[2] = "Australia";
continents[3] = "Antarctica";
continents[4] = "North America";
continents[5] = "South America";
continents[6] = "Africa";

Een letterlijk object definieert de leden van een object en hun waarden. De lijst van object-leden en waarden is ingesloten in accolades ({}) en elk lid wordt gescheiden door een komma. Binnen elk lid, worden de naam en waarde gescheiden door een dubbele punt (:). In het volgende voorbeeld wordt een object gemaakt en geïnitialiseerd met drie leden met de naam Address, City en PostalCode met de respectievelijke waarden "Karl Marxstraat 38", "Antwerpen" en "2000."

var mailingAddress = { 
     "Address"    :   "Karl Marxstraat 38", 
     "City"       :   "Antwerpen", 
     "PostalCode" :   "2000"
};

alert("The package will be shipped to postal code " +
 mailingAddress.PostalCode);

In de vorige voorbeelden worden string en numerieke literals in array- en object-literals gebruikt. Maar je kan ook een heel diagram uitdukken door een de notatie recursief te gebruiken zodanig dat array-elementen en lid-object waarden op hun beurt object- en array-literals kunnen bevatten. Bijvoorbeeld, het volgende fragment illustreert een object dat een array als lid heeft ( PhoneNumbers ), en die array bestaat uit een lijst van objecten.

var contact = {
     "Name": "John Doe",
     "PermissionToCall": true,
     "PhoneNumbers": [ 
       {
           "Location": "Home",
           "Number": "555-555-1234"
       },
       {
           "Location": "Work",
           "Number": "555-555-9999 Ext. 123"
       }
     ]
};
if (contact.PermissionToCall)
{
  alert("Call " + contact.Name + " at " + contact.PhoneNumbers[0].Number);
}

Noot Een grondige discussie over de ondersteuning van literals in JavaScript vind je op Core JavaScript 1.5 Guide onder de Literals section.

Van JavaScript literals naar JSON

JSON is een uitwisselingformaat voor gegevens dat ontstaan is uit een subset van de letterlijke object notatie in JavaScript. De syntaxis van JavaScript voor letterlijke waarden is uiterst flexibel. Maar het is belangrijk te weten dat JSON onderworpen is aan veel strengere regels.

Volgens de JSON standaard moet bijvoorbeeld de naam van een object-lid een geldige JSON string zijn. Een string in JSON moet tussen dubbele aanhalingstekens staan. JavaScript, aan de andere kant, laat toe dat lid-namen van een object worden afgebakend door dubbele of enkele aanhalingstekens of helemaal geen, zolang de naam van het lid niet in strijd is met een gereserveerd JavaScript sleutelwoord.

Het gegevenstype dat je in een elemant van array element of object kan stoppen is in JSON beperkt. Maar in JavaScript kunnen array elementen en leden van een object waarden bevatten van vrijwel elke geldige JavaScript expressie, met inbegrip van functie-aanroepen en definities! Zie www.json.org or RFC 4627 voor een formele beschrijving van de JSON standaard.

De charme van JSON zit in zijn eenvoud. Een bericht geformatteerd volgens de JSON standaard is samengesteld uit een enkele top-level object of array. De array elementen en objectwaarden kunnen objecten, arrays, strings, getallen, Booleaanse waarden (waar en onwaar), of null zijn. Dat is in een notendop, is de JSON standaard! Het is echt zo simpel. Zie www.json.org of RFC 4627 voor een meer formele beschrijving van de standaard.

Vorige objecten omzetten naar json:

var mailingAddress = {
    "Addres": "Karl Marxstraat 38",
    "City": "Antwerpen",
    "PostalCode": "2000"
};

alert("The package will be shipped to postal code " +
    mailingAddress.PostalCode);
let jsonText = JSON.stringify(mailingAddress);
document.querySelector('pre').innerText = jsonText;

In de string staat nu:

{
  "Address": "Karl Marxstraat 38",
  "City": "Antwerpen",
  "PostalCode": "2000"
}

En omgekeerd, de input invullen vooraleer ze getoond worden op basis van een JSON string:

const stringData =
    `{"firstName": "Dennis",
"lastName": "Inghelbrecht",
"editor": "De kat krabt de krollen van de trap.\\nIk eet  graag sushi.\\n"}`;
// van json tekst naar js object
let data = JSON.parse(stringData);
document.querySelector('#firstName').value = data.firstName;
document.querySelector('#lastName').value = data.lastName;
document.querySelector('#editor').value = data.editor;

JSON rendering

Bronnen

https://msdn.microsoft.com/en-us/library/bb299886.aspx

Tania Rascia, How to Use JSON Data with PHP or JavaScript, January 21, 2017

Online JSON editor

JSON Viewer