Looping through an array and injecting all the values into Asked Jul 12 '22 at 09:44 Active Jul 12 '22 at 10:09 Viewed 538 times -1 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}`) }) } javascript loops edited Jul 12 '22 at 09:58 Maolean asked Jul 12 '22 at 09:44 Maolean 9 3 I did not insert any javascript because I have only the fetch function which is empty, and does not do anything but console.log(data) – Maolean Jul 12 '22 at 09:46 3 Well, it would help to see the endpoint you're using, and your current code regardless how short, and know whether or not the API needs a key. Otherwise copy a small sample of the JSON into your question so we can help debug it. – Andy Jul 12 '22 at 09:47 Does this answer your question? [Adding options to a using jQuery?](https://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery) – JkAlombro Jul 12 '22 at 09:51

Answer 1

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}`)
    })