Básicamente, tengo esta API de perros ( https://docs.thedogapi.com/ ) y estoy tratando de hacer un bucle de alguna manera y mostrar el nombre de cada perro del servidor API en mi etiqueta para que las personas puedan elegir el nombre del perro y mostrar fotos e información. sobre eso
<label for="dogs" name="dogsInput" id="dogsLabel"> <select id="dogTypes"> <option value=""></option> </select> // JavaScript document.querySelector('button').addEventListener('click', getFetch) function getFetch(){ const api_key = '' // not sure if I should post it here so I hide it const input = document.querySelector('select').value const url = `https://api.thecatapi.com/v1/breeds/search` fetch(url) .then(res => res.json()) .then(data => { console.log(data[0]) document.querySelector('#name').innerHTML = data[0].breeds[0].name document.querySelector('img').src = data[0].url document.querySelector('h3').innerHTML = "Temperament: " + data[0].breeds[0].temperament document.querySelector('h4').innerHTML = "Life span: " + data[0].breeds[0].life_span }) .catch(err => { console.log(`error ${err}`) }) }Solo asumiré que la API está devolviendo datos, y también asumiré la estructura de datos del objeto JSON.
Tu búsqueda debería verse así:
... fetch(url) .then(res => res.json()) .then(data => { if (!data) return; // Do something here // Get the select element var select = document.getElementById("dogTypes"); // Iterate the data, create a <option> element and append it to // the select for (let i = 0; i < data.length; i++) { const element = data[i]; var option = document.createElement("option"); option.text = element.Name; option.value = element.Value; select.appendChild(option); } }) .catch(err => { console.log(`error ${err}`) })