JSON en arrays

Je kan uiteraard in een JSON bestand ook een array van objecten plaatsen. Je kan dit herkennen aan de vierkante haken vooraan in het bestand.

[
    {
      "naam": "Velociraptor",
      "tijdperk": "Krijt",
      "dieet": "Carnivoor",
      "regios": ["Asia"],
      "hoogte": 2,
      "lengte": 6,
      "gewicht": 33
    },
    {
      "naam": "Triceratops",
      "tijdperk": "Krijt",
      "dieet": "Herbivoor",
      "regios": ["Noord America"],
      "hoogte": 10,
      "lengte": 33,
      "gewicht": 26800
    },
    {
      "naam": "Tyrannosaurus Rex",
      "tijdperk": "Krijt",
      "dieet": "Carnivoor",
      "regios": ["Noord America"],
      "hoogte": 13,
      "lengte": 39,
      "gewicht": 13310
    },
    {
      "naam": "Stegosaurus",
      "tijdperk": "Jura",
      "dieet": "Omnivorous",
      "regios": ["Noord America", "Europa"],
      "hoogte": 14,
      "lengte": 29,
      "gewicht": 6000
    },
    {
      "naam": "Iguanodon",
      "tijdperk": "Krijt",
      "dieet": "Herbivoor",
      "regios": ["Noord America", "Europa"],
      "hoogte": 16,
      "lengte": 33,
      "gewicht": 11000
    }
  ]

We visualiseren deze JSON als volgt:

Het inlezen van deze JSON file gebeurd op identiek dezelfde manier als hiervoor, met het enige verschil dat we nu een array van Dinosaur-objecten hebben.

import dinosaurs from "../assets/json/dinosaurs.json" assert { type: 'json' };

Willen we nu alle namen van alle dinosaurussen afprinten op het scherm kunnen we dit als volgt doen:

for (let dinosaur of dinosaurs) {
    console.log(dinosaur.naam);
}

We zouden ook alle informatie kunnen afprinten van de dinosaurs.

for (let dinosaur of dinosaurs) {
    console.log(`Naam: ${dinosaur.naam}`);
    console.log(`Tijdperk: ${dinosaur.tijdperk}`);
    console.log(`Dieet: ${dinosaur.dieet}`);
    console.log(`Regios: `);
    for (let regio of dinosaur.regios) {
        console.log(`\t${regio}`);
    }
    console.log(`Hoogte: ${dinosaur.hoogte}`);
    console.log(`Lengte: ${dinosaur.lengte}`);
    console.log(`Gewicht: ${dinosaur.gewicht}`);
    
    console.log("-".repeat(50));
}

of we gebruiken hier rechstreeks de printDinosaur functie

for (let dinosaur of dinosaurs) {
    printDinosaur(dinosaur);
}

array als property

Vaak bevind de array zich niet als buitenste element van het JSON object maar als property van een "root object". We noemen dit het root object omdat het de bovenste element is van de boomstructuur.

Hier zie je een voorbeeld van zo'n json bestand:

{
  "dinosaurs": [
    {
      "naam": "Velociraptor",
      "tijdperk": "Krijt",
      "dieet": "Carnivoor",
      "regios": [
        "Asia"
      ],
      "hoogte": 2,
      "lengte": 6,
      "gewicht": 33
    },
    {
      "naam": "Triceratops",
      "tijdperk": "Krijt",
      "dieet": "Herbivoor",
      "regios": [
        "Noord America"
      ],
      "hoogte": 10,
      "lengte": 33,
      "gewicht": 26800
    },
    {
      "naam": "Tyrannosaurus Rex",
      "tijdperk": "Krijt",
      "dieet": "Carnivoor",
      "regios": [
        "Noord America"
      ],
      "hoogte": 13,
      "lengte": 39,
      "gewicht": 13310
    },
    {
      "naam": "Stegosaurus",
      "tijdperk": "Jura",
      "dieet": "Omnivorous",
      "regios": [
        "Noord America",
        "Europa"
      ],
      "hoogte": 14,
      "lengte": 29,
      "gewicht": 6000
    },
    {
      "naam": "Iguanodon",
      "tijdperk": "Krijt",
      "dieet": "Herbivoor",
      "regios": [
        "Noord America",
        "Europa"
      ],
      "hoogte": 16,
      "lengte": 33,
      "gewicht": 11000
    }
  ]
}

Je kan dit ook visualiseren aan de hand van de https://jsonformatter.org/json-viewer tool:

We kunnen ook dit JSON-bestand als volgt inlezen:

import rootObject from '../assets/json/dinosaurs-alt.json' assert { type: 'json' };

We kunnen nu aan de hand van de dot-notatie via het rootObject aan de dinosaurs array geraken:

for (let dinosaur of rootObject.dinosaurs) {
    printDinosaur(dinosaur);
}