AI en studiekeuze

De JSON datastructuur

In deze opdracht gebruik je JSONBin.io om je data gestructureerd op te slaan in de cloud. Daarmee kun je deze gegevens vervolgens ophalen in je webapplicatie via JavaScript.
Het is ook mogelijk om met JavaScript vanuit de webapplicatie nieuwe records aan de database toe te voegen.

Hiernaast zie je een voorbeeld van een eenvoudige database, weergegeven in JSON-formaat.
De database bevat twee records (ook wel objecten genoemd).

Elke record bestaat uit zes velden, en elk veld is een sleutel-value-paar.

  • De sleutel (key) staat links van de dubbele punt :
  • De waarde (value) staat rechts van de dubbele punt

Let erop dat je JSON foutloos is opgebouwd. Dat betekent:

  • Elke record (object) is correct geformuleerd (gesloten haken, juiste interpunctie)
  • Elk veld is een key-value-paar
    • De key geeft aan welke informatie het veld bevat.
    • De value bevat de bijbehorende gegevens.
  • Alle sleutels (keys) moeten:
    • Staan tussen dubbele aanhalingstekens
    • Alleen kleine letters bevatten
    • Geen spaties bevatten.
      Gebruik underscores of camelCase voor meerwoordige namen
  • Values (waarden) moeten afhankelijk van het type waarde:
    • Strings: staan tussen dubbele aanhalingstekens 
    • Numbers: staan niet tussen aanhalingstekens
    • Boolean: (true of false) staan tussen aanhalingstekens
    • Null: (geen waarde) staat niet tussen aanhalingstekens
				
					
[
  {
    "voornaam": "Evert-Jan-Ralph",
    "achternaam": "Hövel tot Westervlier en Wezeveld",
    "tussenvoegsel": "van den",
    "leeftijd": 17,
    "happy": "true"
  },
  {
    "voornaam": "Jan",
    "achternaam": "Rap",
    "tussenvoegsel": "",
    "leeftijd": 18,
    "happy": "false"
  },
  {
    "voornaam": "Greet",
    "achternaam": "Ignaarkennis",
    "tussenvoegsel": "",
    "leeftijd": 16,
    "email": "maartenclaessens@schakelcollege.com",
    "happy": "true"
  }"
]

Gebruik een tool zoals jsonlint om je JSON te controleren.

JSONBin

Een JSONBin account aanmaken
  • Ga naar jsonbin
  • Klik rechtsboven op “Sign up”
  • Meld je aan met je school-e-mailadres of Google (aanbevolen).
  • Kies voor het gratis account (Free Plan).
    Je hebt geen creditcard of betaling nodig.

Let op: Na aanmelding ontvang je een bevestigingsmail.
Je moet je e-mailadres bevestigen voordat je verder kunt.

Een nieuwe bin aanmaken

Werk zorgvuldig — je kunt de instellingen later niet meer aanpassen.
Alleen de inhoud van de database (de JSON) kun je achteraf wijzigen.

  • Klik op “Create a New Bin”.
  • Plak je data in het JSON-veld. Zorg dat je JSON geldig is (gesloten haakjes, dubbele quotes, geen komma op het eind).
    Gebruik hiervoor eventueel jsonlint
  • Geef de bin een duidelijke titel. Dit kun je achteraf niet wijzigen
  • Laat de bin op private staan (standaard zo ingesteld).
  • Kopieer de bin-ID (dat is een unieke lange tekenreeks) – die heb je nodig in je JavaScript-code.
  • Ga naar je dashboard en klik op API Keys:
  • Kopieer daar je secret API-key.
  • Gebruik deze gegevens in je eigen JavaScript-code tijdens het testen.
    Deel deze sleutel nooit met anderen.
 

GET: data uit de database ophalen

In de HTML pagina maak je een div-element met de id “namenlijst”.
In de functie die we als eerste gaan bespreken wordt deze div alleen gebruikt om een foutmelding te tonen. Later komen ook de resultaten in deze div te staan.

De API-sleutel van JSONBin en de bin-ID worden vastgelegd in variabelen. Met deze gegevens krijgt jouw script toegang tot de database in jouw account.
Er wordt ook een variabele van het type array aangemaakt. Hierin slaat JS de opgehaalde data tijdelijk op.

In de functie haalDataOp wordt een AJAX-call gedaan.
Een AJAX-call is een soort achtergrondgesprekje tussen jouw script en de database.
De gebruiker ziet gewoon de webpagina en kan daarmee doorgaan.
Ondertussen vraagt het script op de achtergrond aan de database: “Hé database, heb je nog nieuwe gegevens voor me?” (GET)
De database reageert met een antwoord (response).
Jouw script verwerkt dat antwoord en laat het netjes zien op de webpagina, zonder dat de hele pagina opnieuw geladen hoeft te worden.

Bij zo’n request moeten de volgende gegevens worden meegestuurd:

  • URL: hiermee wordt de laatste versie van de juiste bin opgehaald.
  • Method (GET/PUT/POST): geeft aan of je data wilt ontvangen of verzenden.
  • Header-veld: dit is een soort label dat je meegeeft bij het verzoek aan de server. Hierin plaats je de: X-Master-Key: de sleutel die toegang geeft tot de database.

Als de communicatie lukt (success: …) wordt een functie uitgevoerd waarin de response wordt verwerkt.
De volledige database wordt in de lege array opgeslagen. Deze informatie kan later in andere functies gebruikt worden. In het voorbeeldscript wordt de complete array in de console gelogd.

Als het ophalen mislukt (error: …) wordt informatie over de fout teruggegeven en zichtbaar gemaakt voor de gebruiker.

				
					const apiKey = "jouw-API-sleutel";
const binId = "De-bin-ID";
let data = [];

function haalDataOp() {
  $.ajax({
    url: `https://api.jsonbin.io/v3/b/${binId}/latest`,
    method: "GET",
    headers: { "X-Master-Key": apiKey },
    success: function (response) {
      data = response.record;
      console.log(data);
    }
    },
    error: function (xhr, status, error) {
      console.error("Fout bij ophalen:", status, error);
      $("#namenlijst").html("<p>Fout bij laden van data.</p>");
    }
  });
}
De Methods

GET: je vraagt de database om de huidige inhoud op te sturen.
POST: je voegt één record toe → JSONBin plaatst dit record erbij in de bin.
PUT: je vervangt de hele inhoud van de bin door jouw nieuwe versie.

Toon data

De functie toonData() zorgt ervoor dat de records uit de database die je hebt opgehaald zichtbaar worden op de webpagina.

De functie bestaat uit drie onderdelen die hieronder uitgelegd worden.

Zoeken naar het juiste element
Eerst wordt in de DOM gezocht naar het element met de id “namenlijst”.
Dat element wordt vastgelegd in de variabele $lijst.
Het resultaat is een jQuery-object (geen gewoon DOM-element).
Met zo’n jQuery-object kun je makkelijk functies gebruiken zoals .empty(), .append(), .html() en .val().

De $ in de naam const $lijst is dus niet verplicht, maar handig: zo zie je meteen “ah, dit is een jQuery-object en geen gewoon DOM-element.”

Controleren of de data geldig is

Daarna volgt een if-statement dat controleert of data wel echt een lijst (array) is.
Als dat niet zo is: laat een foutmelding zien in de pagina.
Met return wordt de functie meteen gestopt, zodat de rest van de code niet wordt uitgevoerd.

Door de records heen lopen en tonen

Als data wél een array is, loopt een forEach-loop door alle records heen.
Voor elke persoon wordt een stukje tekst opgebouwd.
Als het veld tussenvoegsel leeg is, wordt er gewoon niks ingevuld (“”).
De || in het script betekent “of”:
pak de waarde van tussenvoegsel, en als die er niet is, gebruik dan een lege string.

Als de tekst klaar is, wordt een nieuw <p>-element gemaakt en daarin de tekst gezet.
Dit <p>-element wordt onderaan toegevoegd aan het element “namenlijst”.

				
					function toonData() {
    const $lijst = $("#namenlijst");
    $lijst.empty(); 
    if (!Array.isArray(data)) {
        $lijst.html("<p>Geen geldige array ontvangen!</p>");
        return;
    }
  
    data.forEach(item => {
        const tekst = `${item.voornaam} ${item.tussenvoegsel || ""} ${item.achternaam} 
        (leeftijd: ${item.leeftijd}, 
        blij: ${item.happy})`;
        $lijst.append($("<p>").text(tekst)); 
    });
}
Het item

Wanneer we een forEach gebruiken, gaan we record voor record door de hele lijst (de array). Bij elke ronde pakt de forEach er één record uit en stopt dat tijdelijk in een variabele. In ons script heet die variabele item.
item is dus één persoon uit de hele lijst met data. Omdat het een object is, kun je alle velden uit dat object oproepen, zoals:

  • item.voornaam → de voornaam
  • item.achternaam → de achternaam
  • item.tussenvoegsel → het tussenvoegsel

Je kunt de naam van die variabele ook anders kiezen (persoon, record, …), maar hier is het item.

Het verschil tussen for en forEach

for-loop
Je zegt zélf: “begin bij 0, ga door tot het einde, en tel steeds 1 erbij op.”
Handig als je de behalve de waarden ook de positie (index) nodig hebt.

forEach-loop
Je zegt: “doe dit voor elk element in de lijst.”
Handig als je alleen de waarden nodig hebt en niet de index.

arrow function

=> is een verkorte schrijfwijze voor het maken van een functie.
Dit heet een arrow function (pijlfunctie).
Het betekent: “voer deze code uit wanneer dit gebeurt”.
Het is hetzelfde als: function () { … }, maar dan korter geschreven.

PUT: stuur de data terug naar de database

Maak in de HTML pagina een formulier met de volgende onderdelen:

  • 4 inputvelden
  • selectveld met de opties Ja, Nee en Neutraal
  • submitbutton.

De velden voor voornaam, achternaam en leeftijd zijn verplicht.
Maak ook een div met de id feedback

In het JS-script maak je een functie die aangeroepen wordt door een klik op de submitbutton.
Met preventDefault stop je het standaard gedrag van een formulier (dat is: de pagina opnieuw laden).
We willen dat zelf regelen met jQuery en Ajax.

Dan maken we een nieuw record (een object met key–value paren).
De waarden halen we op uit de invoervelden van het formulier.

  • .val() = waarde van een invoerveld.
  • .trim() = haalt spaties weg aan het begin en einde.
  • parseInt() = zet tekst om naar een getal.
  • Bij happy: de keuze van de gebruiker in het selectieveld. 
    dit zetten we om naar echt true/false.

 
We stoppen dit nieuwe record achteraan in onze bestaande array data.

In de ajax-call vermeld je na de gebruikelijke url en method (PUT deze keer), in de headers behalve de API-key het type informatie dat verzonden moet worden.

data is in je script een JavaScript array met objecten, maar JSONBin verwacht dat je de hele inhoud van de bin in JSON-formaat opstuurt.
JSON.stringify(data) zet de JavaScript-array om naar een tekststring in JSON-notatie (met {}, [], “…”).
Zonder deze stap stuur je een “rauw” JavaScript-object, en dat kan de server niet begrijpen.


Tenslotte laat in de feedbackdiv aan de gebruiker weten dat het is gelukt.
Haal de nieuwe data meteen op zodat de lijst op het scherm wordt ververst. 
Maak het formulier weer leeg zodat je meteen een nieuwe kunt invoeren.

Als er iets misgaat laat je uiteraard een foutmelding zien.

 
				
					
$("#toevoeg-formulier").on("submit", function (e) {
    e.preventDefault(); 

    const nieuwRecord = {
        voornaam: $("#voornaam").val().trim(),
        achternaam: $("#achternaam").val().trim(),
        tussenvoegsel: $("#tussenvoegsel").val().trim(),
        leeftijd: parseInt($("#leeftijd").val()),
        happy: $("#happy").val() === "true"
    };
    data.push(nieuwRecord);
  
  $.ajax({
        url: `https://api.jsonbin.io/v3/b/${binId}`,
        method: "PUT",
        headers: {
          "X-Master-Key": apiKey,
          "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function () {
          $("#feedback").text("Succesvol toegevoegd!");
          haalDataOp(); 
          $("#toevoeg-formulier").trigger("reset");
        },
        error: function () {
          $("#feedback").text("fout bij toevoegen.");
        }
    });
});
Safety First?

Deze database bevat persoonlijke gegevens. Het is daarom belangrijk om extra veiligheidsmaatregelen te nemen.

Om dit te waarborgen maken we een beveiligde omgeving, zodat de webapp alleen toegankelijk is voor gebruikers die eerst inloggen.

Hiervoor gaan we verder werken met Firebase.

Zo leer je niet alleen hoe je data opslaat en ophaalt, maar ook hoe je een veilige webapp bouwt waarin privacy en beveiliging centraal staan — vaardigheden die in de praktijk onmisbaar zijn.