Verder met het bouwen van onze setup() functie. We weten nu waar en hoe we data kunnen opvragen. We hebben 2 opties: of we gebruiken een preload() functie, of we gebruiken een callback. De preload functie zet alles on hold, tot de data is ingeladen, de callback laat wat meer flexibiliteit toe. ALhoewel het hier gaat om data die niet per seconde of minuut veranderd, kiezen we er toch voor om met een callback te werken. Dit omdat dit concept iets moelijker te begrijpen is, en oefening hiervoor de beste manier is.

Dit is onze setup() functie:

 
function setup() {
  createCanvas(400, 400);
  loadJSON("http://www.anapioficeandfire.com/api/books", getData);
}

We maken hier een canvas aan van 400 breed en 400 hoog. Vervolgens roepen we de loadJSON functie aan, die wanneer ze klaar is verwijst naar de functie getData. de getData functie bestaat nog niet, dus we maken deze meteen aan. Ze komt onderaan in de code te staan.

function getData(data) {
  mijnData = data;
}

Het enige wat deze functie doet is de data ontvangen op het moment dat loadJSON klaar is. Dit vangt ze op in de lokale variabele “data”. Om deze data ook in andere codeblokken te gebruiken, moeten we ze overzetten naar een globale variabele. In dit geval is dat mijnData.
Dat wil zeggen dat we helemaal bovenaan in de code ook deze globale variabele mijnData moeten aanmaken.

var mijnData;

Tot zover hebben we data aangevraagd bij een online API en deze ingeladen in een globale variabele zodat ze overal te gebruiken is. Nu is het tijd om wat met deze data te gaan doen.

Weergeven van data >