JSON - Overdracht van informatie

Wat is JSON

JSON staat voor JavaScript Oject Notation.
Het is een manier om informatie op te slaan en over te brengen via/ naar (andere) webservers. Je wil soms niet een hele pagina's ophalen van de webserver, maar alleen een deel van de informatie. Door niet alle HTML mee te sturen maar alleen een deel van de informatie, bespaar je veel data en dus laadtijd van de server (of wachttijd voo de gebruiker).

JSON is altijd een string (/tekst!)

Het grootste verschil wat je moet onthouden is dat JSON altijd gezien wordt als een string (dus tekst). Wil je JSON informatie omzetten naar een object (of een object naar JSON data om te versturen) dan gebruik je daar JSON.stringify() en JSON.parse() voor. (Zie volgende hoofdstuk)

Waarvoor gebruiken we JSON

JSON gebruik je als je data wilt versturen tussen een webapplicatie (of homepage) en de server. JSON is een standaard die hier veel voor gebruikt wordt. Door JSON te gebruiken is er 1 standaard waarop informatie heen-en-weer gestuurd kan worden.

JSON lijkt op een JavaScript object

Onderstaand een stukje voorbeeld van JSON code:

{
    "captains" : [
        { "firstname" : "James Tiberius", "lastname" : "Kirk" },
        { "firstname" : "Jean-Luc", "lastname" : "Picard" },
        { "firstname" : "Catherin", "lastname" : "Janeway" },
        { "firstname" : "Johnathan", "lastname" : "Archer" },
    ]
};

JSON regels

• Data is gescheiden door sleutels en waarden (key-value pairs)
• Data wordt gescheiden door komma's
• Curly braces scheiden de data { }
• Rechte haken bevatten de arrays [ ]
• Alle data staat tussen dubbele quotes " "

Omgaan met JSON in jouw code

Als eerste moet je de JSON data/ informatie omzetten. Dit kan met de JSON.parse() manier.

const myJsonData = '{ '+
    ' "captains" : [
        ' { "firstname" : "James Tiberius", "lastname" : "Kirk" },'+
        ' { "firstname" : "Jean-Luc", "lastname" : "Picard" },'+
        ' { "firstname" : "Catherin", "lastname" : "Janeway" },'+
        ' { "firstname" : "Johnathan", "lastname" : "Archer" },'+
    ' ]'+
' }';

const myCaptains = JSON.parse(myJsonData);

Nadat je de code hebt omgezet, zie hierboven, kan je met een loop door de array heen lopen en de data op het scherm tonen (of op de juiste plaats in een DIV).

for (let i = 0; i < myCaptains.length; i++) {
  const captain = myCaptains[i];
  console.log(`Voornaam : $(captain.firstname) en achternaam $(captain.lastname)`;
}

SPA en MPA

Tegenwoordig zijn veel websites voor een deel gemaakt als Single Page Application of SPA in het kort. Een SPA is niet hetzelfde als een website die uit 1 pagina bestaat. Er kunnen meerdere pagina's zijn, maar bij een SPA worden alle pagina's/ alle HTML in een keer ingeladen.
Een Multie Page Application of MPA in het kort is de meer traditionele website. Je herkent deze sites doordat je vaak van pagina verwisselt als je in het menu ergens naar toe klikt (of elders op de pagina.

Anno vandaag een combinatie van een MPA met SPA's

Wat je tegenwoordig veel ziet is dat data uitgewisseld wordt tussen MPA en SPA pagina's. Dit heeft met een aantal nadelen te maken van een SPA, vooral op het gebied van Search Engine Optimization in het kort ook wel SEO genoemd. De manier hoe zoekmachines jouw website vinden.

MPA met SPA : Voorbeeld 1 - Winkelpagina

MPA met SPA : Voorbeeld 2 - Reddit

Wat kan jij maken als voorbeeld?

Als je aan de slag wilt gaan met JSON data en zelf een SPA maken kan je dit uiteraard doen, onderstaand een aantal opdrachten/ voorbeeld die je kan maken. Je hebt hier wel verschillende technieken nodig die je moet combineren. Lees ook het hoofdstuk van Fetch goed door, dit heb je nodig bij het standaard ophalen van informatie.

LET OP: vaak moet je je bij een API aanmelden en heb je een sleutel nodig, lees daarom de instructies goed door!.