10. Visualización de datos

10.4. JSON

Otro formato en el que es común que nos encontremos datos es JSON (JavaScript object notation), que no son más que objetos de JavaScript de los que podemos extraer sus propiedades de manera sencilla. En un JSON la información está algo más estructurada que en un .csv, por lo que nos será un poco más sencillo de leer. Veamos los datos que hemos usado antes pero ahora en formato JSON:

Vemos que tenemos un array de objetos, cada uno con sus distintas propiedades, que se corresponden a las columnas de la tabla. Al tener ya todos los datos en un array, nos será mucho más fácil acceder a estos.

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;
  }
}

Pese a que en el JSON tenemos un array de objetos, al utilizar loadJSON() se nos devolverá un objeto del que no podemos obtener directamente su tamaño con lakesData.getRowCount(), como hacíamos en el caso del .csv. Esta es una limitación que P5 todavía no ha podido solucionar, pero que podemos solventar obteniendo el número de elementos en el objeto mediante Object.keys(lakesData).length. La ventaja de disponer del objeto es que podemos acceder directamente a cada una de las propiedades y utilizarlas para crear nuestros objetos Lake sin tener que crear arrays independientes para cada una.

Una vez creados los objetos Lake, el resto de la visualización la haríamos de la misma manera que anteriormente.