L'ojectiu es crear una nova Api de forma creativa, triant un Api qualsevol, i generar gràfics emprant Neocities.
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 és la url on està situada la nostra JSON, que inclou si es necessari la nostra API key o la nostra clau d'usuari per accedir. La funció callback conté unes variables globals que hem creat abans que estan buides inicialment i que ara hem d'omplir igualadas als valors concrets de determinadas posición del JSON. Per exemple si vull accedir a una dada concreta podria ser: nomBaseDades.nomNode.nommSubnode i podria contenir un 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 3r aliment a la unitat del 4rt nutrient: let nutrient3unir4 usdafoods.foods[2].foodNutrient[3].unitName
Un altre estrategia que és més moderna i professional és utilitzar la fetch API de javaScript, són unes instruccions con fetch(url), async i await que ens permeten que es carregui el JSON. Aquestes instruccions no funcionesn en navegadors molt molt antics.
Si volem no escriure moltes vegades uun codi hem de fer servir arrays i loops for. Hi ha moltes formes diferents i solucions diferents amb aquesta estrategia per exemple, hi han solucions amb for, for each, while, cases, etc...
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 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 un codi.
Si escric let(i=0; nutrientName.lenght, i ++) usdafoofs.foods[0].nutrientName[i]
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!