L'objectiu és utilitzar una API de forma creativa, triant una API qualsevol, i generar gràfics emprant chartjs.
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 paràmetres la URL i una funció callback, per tant és loadJSON (URL, callback); La URL és on està situada la nostra JSON, que inclou si és necessari la nostra api key o clau d'usuari per accedir-hi. La funció callback conté unes variables que hem creat abans (global) que estàn buides inicialment i que ara anem a omplir igualant-les als valors concrets de determinades poscicions al JSON. Per exemple si vull accedir a una dada concreta podria ser : nomBaseDades.nomNode.nomSubnode i podria contenir una array, usdafoods.foods[0].foodNutrient[0].nutrientName i això accederia al primer nutrient de la primera fruita del usdafoods i ens dona el nom del primer nutrient. Vull accedir al tercer aliment a la unitat del 4rt nutrient: let nutrient3unit4 = usdafoods.foods[2].foodNutrient[3].unitName.
Una altra estrategia que és més moderna i professional és utilitzar la fech API de javaScript, són unes instruccions com fetch (URL), async i await que ens permeten que es carregui 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 ha moltes formes diferents i solucions diferents amb aquesta estrategia: per exemple, hi ha solucions amb for, for each, while, cases, etc...
Primer hem de crear un espai a la memoria buit en el que càpiga un array : let nutrientNames = [] ; això crea un espai a la memoria de l'ordinador que es diu nitrientNames i que pot contenir molt numeros perquè és una array. 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++) usda.foods[0].nutrientName[i] ; }
Gràfic exemplebold and italic text.
To learn more HTML/CSS, check out these tutorials!