10. Visualització de dades

10.4. JSON

Un altre format en el qual és comú que ens trobem dades és JSON (JavaScript object notation), que no són més que objectes de JavaScript dels quals podem extreure les seves propietats de manera senzilla. En un JSON la informació està una mica més estructurada que en un .csv, per la qual cosa ens serà una mica més senzill de llegir. Vegem les dades que hem usat abans però ara en format JSON:

Veiem que tenim un array d’objectes, cadascun amb les seves diferents propietats, que es corresponen a les columnes de la taula. En tenir ja totes les dades en un array, ens serà molt més fàcil accedir-hi.

let lakesData;
let lakes = [];

function preload() {
  lakesData = loadJSON("lakes.json");	
}

function setup() {
  createCanvas(400, 250);
  let numOfLakes = Object.keys(lakesData).length;
	
  for(let i = 0; i < numOfLakes; i++) {
    let newLake = new Lake(lakesData[i].name,
                           lakesData[i].lat,
                           lakesData[i].long, 
                           lakesData[i].area * 0.025);
    lakes[i] = newLake;
  }
}

Malgrat que en el JSON tenim un array d’objectes, en utilitzar loadJSON() se’ns retornarà un objecte del qual no podem obtenir directament la seva mida amb lakesData.getRowCount(), com fèiem en el cas del .csv. Aquesta és una limitació que P5 encara no ha pogut solucionar, però que podem solucionar obtenint el nombre d’elements a l’objecte mitjançant Object.keys(lakesData).length. L’avantatge de disposar de l’objecte és que podem accedir directament a cadascuna de les propietats i utilitzar-les per crear els nostres objectes Lake sense haver de crear arrays independents per a cadascuna.

Una vegada creats els objectes Lake, la resta de la visualització la faríem de la mateixa manera que anteriorment.