So basically I have this dogs API (https://docs.thedogapi.com/) and im trying to loop somehow and show every single dog's name from the API server into my tag so people can choose the dog name and show photos and info about it
<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}`)
})
}
I'll just assume that the API is returning data, and I'll also assume the data structure of JSON object.
Your fetch should look something like this:
...
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}`)
})