Quiero agregar el nombre del gato al menú desplegable. Puedo acceder a las propiedades y sus valores. Pero, cuando trato de ingresar/colocar esos valores en el menú, solo se almacena el último valor. Supongo que es (código - Función accessArray) reemplazando el valor actual una vez que recorre todo. consola.log(datos)
data.name tiene la lista de nombres de gatos. consola.log(elemento.nombre)
Quiero crear una lista para poder tener los nombres de todos los gatos en el menú desplegable. desplegable
Aquí está el enlace de la API pública que estoy usando: https://docs.thecatapi.com/api-reference/breeds/breeds-list
async function start(){ try{ const response = await fetch("https://api.thecatapi.com/v1/breeds"); const data = await response.json(); console.log (data); filterData(data); }catch (e){ console.log("Error : "+ e); } } start(); function filterData (data){ data.forEach(element => { console.log(element.name); acessArray(element.name); }); } function acessArray(data){ document.getElementById("catList").innerHTML = ` <select> <option value="Choose a cat">Choose a cat</option> <option> ${data} </option> </select> `; }No estoy seguro de lo que quiere que haga su código, pero si solo <option> , entonces lo resolverá.
Cada vez que configura este document.getElementById("catList").innerHTML = '<select>...</select>' , sobrescribe la última entrada.
Mira el código y reemplaza lo que necesites. 😉
async function start(){ try{ const response = await fetch("https://api.thecatapi.com/v1/breeds"); const data = await response.json(); console.log (data); filterData(data); }catch (e){ console.log("Error : "+ e); } } start(); function filterData (data){ document.getElementById("catList").innerHTML = ''; // clear the list data.forEach(element => { console.log(element.name); acessArray(element.name); }); } function acessArray(data){ // This will add a <select> over another <select> and so on document.getElementById("catList").innerHTML += ` <select> <option value="Choose a cat">Choose a cat</option> <option> ${data} </option> </select> `; }Lo que creo que debería hacer:
async function start(){ try{ const response = await fetch("https://api.thecatapi.com/v1/breeds"); const data = await response.json(); console.log (data); filterData(data); }catch (e){ console.log("Error : "+ e); } } start(); function filterData (data){ document.getElementById("catList").innerHTML = ` <select> <option value="Choose a cat">Choose a cat</option> `; // clear the list and start filling data.forEach(element => { console.log(element.name); acessArray(element.name); }); document.getElementById("catList").innerHTML += '</select>'; //End } function acessArray(data){ // This will add a <select> over another <select> and so on document.getElementById("catList").innerHTML += ` <option> ${data} </option> `; }