Een tutorial over het werken met JSON in JavaScript

Introductie

Er zijn veel manieren waarop JSON kan worden gebruikt in JavaScript. Een van de meest elementaire toepassingen is het opslaan van gegevens. Je kunt het ook gebruiken om gegevens over te dragen tussen clients, tussen servers of van server naar client. Andere nuttige toepassingen zijn onder meer de mogelijkheid om gegevens te configureren en te verifiëren, evenals het genereren van gegevensstructuren.

In deze handleiding zullen we ontdekken hoe je JSON kunt gebruiken in je JavaScript-programma's. Als je al ervaring hebt met programmeren in JavaScript, zou dit heel natuurlijk moeten aanvoelen.

Wat is JSON?

JSON staat voor JavaScript Object Notation. Het is een indeling die is ontworpen om het delen van verschillende soorten gegevens mogelijk te maken. JSON gebruikt voornamelijk JavaScript als primaire programmeertaal. Het werkt ook met andere talen zoals Python, PHP, Ruby, evenals Java. Het is gemakkelijk te lezen, extreem licht van gewicht en vereist niet veel opmaak. Je kunt vertrouwd raken met de algemene syntaxis en structuur van de indeling door onze handleiding te volgen: Een overzicht van de JSON-indeling voor het delen van gegevens.

JSON kan op zichzelf worden gebruikt of worden gedefinieerd in een andere bestandsindeling. Als het op zichzelf staat, gebruikt het de .json extensie. In een andere indeling verschijnt het als een JSON-tekenreeks tussen aanhalingstekens of als een object dat aan een variabele is toegewezen. JSON kan bijvoorbeeld ook worden gebruikt in de .html indeling. Met deze indeling kun je relatief eenvoudig gegevens overdragen tussen de server en de browser.

De JSON-indeling is op tekst gebaseerd. De sleutel-waardegegevens verschijnen tussen accolades. Dit is hoe een typisch .json-bestand eruitziet:

Als je een JSON-object hebt in een .js of .html-bestand, verschijnt het als een variabele zoals deze:

In sommige gevallen zie je ze allemaal op één regel. Dit is wanneer de JSON wordt weergegeven als een tekenreeks in plaats van als een object in het JavaScript-bestand:

Je kunt JSON-objecten converteren naar tekenreeksen. Dit is handig als je snel gegevens wilt overdragen.

JSON versus JavaScript-object

Zoals we al eerder zeiden, werkt JSON met elke programmeertaal. Je kunt echter alleen met JavaScript-objecten werken met behulp van JavaScript. De syntaxis in JSON en JavaScript is vergelijkbaar. Het verschil is dat JavaScript-objecten verschijnen in strings in plaats van aanhalingstekens. Bovendien kunnen JavaScript-objecten functies als waarden gebruiken, wat betekent dat ze minder beperkt zijn.

In het volgende voorbeeld tonen we de JavaScript-optie van een gebruiker. De gebruiker is Sammy Shark en deze is momenteel online:

Zoals je kunt zien, staan er geen aanhalingstekens om sleutels zoals first_name, last_name, online, of full_name. Ook staat er een functiewaarde op de laatste regel. Als je toegang wilt tot de gegevens in de vorm van een tekenreeks, kun je user.first_name aanroepen met behulp van puntnotatie. Als je in plaats daarvan de volledige naam wilt, gebruik je user.full_name(), aangezien het een functie is.

Hoe krijg je toegang tot JSON-gegevens

Zoals we in de vorige sectie hebben besproken, kun je in JavaScript toegang krijgen tot JSON-gegevens met behulp van puntnotatie. Laten we het voorbeeld nemen van een JSON-object met de naam sammy:

Onze puntnotatie om toegang te krijgen tot de waarden is:

De variabele komt eerst. Daarna plaatsen we een punt. Ten slotte vermelden we de sleutel waartoe we toegang willen.

Stel dat we een alert in JavaScript willen maken die de waarde toont van de first_name sleutel. Om deze in een pop-up te laten verschijnen, gebruiken we de JavaScript-functie alert() als volgt:

Een andere manier om toegang te krijgen tot de gegevens uit JSON is door gebruik te maken van de vierkante haken-syntaxis. De sleutel moet tussen dubbele aanhalingstekens binnen de vierkante haken worden geplaatst. Hier is een vervolg op het vorige voorbeeld:

Wat als je werkt met geneste array-elementen? In dit geval moet je de index van het item in de array aanroepen. Neem het volgende voorbeeld:

Stel dat we toegang willen krijgen tot de string facebook. Hier is hoe we de puntnotatie gebruiken om toegang te krijgen tot dat item in de array met behulp van het indexnummer:

Vergeet niet om een extra punt toe te voegen voor elk genest element.

Functies die met JSON worden gebruikt

Vervolgens kijken we naar een paar functies die je met JSON kunt gebruiken. Gegevensoverdracht en -opslag worden vrij eenvoudig wanneer je JSON kunt converteren van object naar string of van string naar object. We zullen onderzoeken hoe je JSON op twee verschillende manieren kunt stringificeren en parsen:

• JSON.stringify()

Strings zijn beter te gebruiken wanneer je gegevens op een lichtgewicht manier wilt overdragen. Daarom worden ze gebruikt om gegevens op te slaan en over te dragen van client naar server. Neem het volgende voorbeeld. Stel dat je gegevens verzamelt van de instellingen van de gebruiker op één machine. Je moet deze informatie naar je server sturen. Hiervoor gebruik je een string. Vervolgens kun je deze weer converteren met JSON.parse() om deze te lezen en ermee te werken.

De functie die we hier zullen belichten is JSON.stringify(). Deze functie converteert een JSON-object naar een JSON-string. In dit voorbeeld wijzen we ons object toe aan de variabele obj. We converteren het met de  JSON.stringify()-functie. Hiervoor geven we obj door aan de functie en wijzen we de string toe aan de variabele s als volgt:

Het aanroepen van de variabele s geeft je de JSON als string:

• JSON.parse()

Begrijpelijkerwijs doet JSON.parse() het tegenovergestelde. Nadat je klaar bent met het transporteren van de gegevens, moet je deze weer converteren naar een JSON-object zodat je ermee kunt werken. Eén optie is om de functie eval() te gebruiken. Deze aanpak is echter niet erg veilig. Daarom gebruiken we liever de functie JSON.parse() in plaats daarvan.

Bekijk het vorige voorbeeld nog eens. We geven de string s door aan de functie JSON.parse(). Vervolgens wijzen we deze toe aan een nieuwe variabele:

Ons nieuwe object is nu o. Dit is hetzelfde als obj. Meer inzicht ontstaat wanneer we JSON.parse() in een HTML-bestand als volgt beschouwen:

Hier kun je daadwerkelijk zien hoe we de string s hebben geconverteerd naar een opvraagbaar object. Dus, JSON.parse() is een veilige optie voor het converteren van JSON-strings naar objecten.

Conclusie

Zoals we in deze handleiding hebben gezien, heeft JSON veel implementaties in JavaScript. Het is vooral handig omdat het met bijna elke programmeertaal kan worden gebruikt, waardoor het de natuurlijke keuze is. Bovendien hebben we nog maar het topje van de ijsberg gezien. Er is nog zoveel meer dat je met JSON kunt doen. Het wordt al ondersteund in API's.

Hier zijn nog meer bronnen van onze blog die je zullen helpen programmeren met JavaScript:

• Leer hoe prototypes en overerving werken in JavaScript.
• Ontdek in detail hoe je JavaScript aan HTML toevoegt.
• Als je je eigen webapplicatie bouwt, bekijk dan onze gids over hoe je de beste serverconfiguratie kiest.

Veel computerplezier!