L'objectiu és utilitzar una api de forma creativa triant una api qualsevol, i generar gràfics emprant chart.js
Per accedir a un API ho puc fer de moltes maneres si utilitzo la bilioteca p5.js faré instruccions com loadJSON. Aquesta funció té com a parametres la url i una funció callback, per tant és loadJSON ( url, callback ); La url és la url on està situada la nostra JSON, que inclou si és necessari la nostra API key o clau d'usuari per accedir. La funció callback conté unes variables que hem creat abans que són globals i que están buides inicialment i que ara anem a omplir igualant-les als valors concrets de determinades posicions del JSON, per exemple si vull accedir a una dada concreta podria ser: nomBaseDades.nomNode.nomSubNode i podria contenir un array, usdafoods.foods[0].foodNutrient[0].nutrientName i això accederia al primer nutrient de la primera fruita de l'usdafoods i ens dona el nom del primer nutrient. Vull acedir al 3r 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 fetch 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 for, for each, while, cases, etc.
Primer hem de crear un espai buit a la memoria que capiga un array : let nutrientNames = []; això crea un espai a la memoria del ordinado que és diu nutrientNames i que pot contenir molts numeros perquè és un 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.length,i++) ---> usdafoods.foods[0].nutrientName[i]; se puede hacer con let j i let k.
Gràfic exemple
Here's how you can add an image:
Here's how to make a list:
To learn more HTML/CSS, check out these tutorials!