API

L'objectiu es utilitzar una api de forma creativa triant una api qualsevol i generar gràfics emprant chart.js

Gràfic Exemple

Per accedir a un API ho puc fer de moltes maneres, si utilitzo la biblioteca p5.js faré servir la instrucció loadJSON. Aquesta funció té com a parametres la url i una funció callback, per tant és loadJSON(url, callback); la url es la url que conté la nostra JSON , que inclou si és necessari la nosta api key o clau d'usuari per accedir. La funció callback conté unes variables globals que estan buides inicialment i que ara anem a omplir igualant-les als valors concrets de determinades posicions del JSON, per exempe si vull accedir a una dada concreta podria ser : nomBaseDades.nomNode.nomSubnode i podria contenir una array, usdafoods.foods[0].foodnutrient[0] aixó accederia al primer nutrient de la primera fruita del usdafoods i ens dona el nom del primer nutrient. Vull accedir al 3r aliment a la unitat del 4 nutrient:let nutrient3unit4 = usdafoods.foods[2].foodnutrient[3]unitname.

Un altre estrategia que és més moderna i professional és utilitzar la fetch API de js, són unes intruccions com fetch(url), async i awake que ens permeten que descarregui el JSON. Aquestes instruccions no funcionen en navegadors molt molt antics.

Si volem no escriure moltes vegades un codi hem de fer servir arrays i loops for. Hi hamoltes formes diferents i solucions diferents amb aquesta estrategia per exemple: hi ha solucions amb for, for each, while, cases...

Primer hem de crear un espai a la memoria buit en el que capiga un array : let nutrientNames = []; això crea un espai a la memoria de l'ordinador que es diu nutrientNames i que pot contenir molts numeros. Això s'ha de fer al principi del codi si volem fer-ho com una variable o array global que afecti a tot el codi

Si escric let(i=0; nutrientName.lenght,i+) usdafoods.foods[0].nutrientName[i]}, es pot fer amb j,k...