How can I display api data in an html list?

I am working on a website that will be pulling data from an api and displaying the elements in a list. I got this code from another online source, but only the hardcoded data shows, not the data from the api. Is there an issue with my javascript?

Here is my current code below:

<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <ul id="myList"></ul>
        <script>

            let displayList = ['Apples', 'Oranges', 'Grapes', 'Berries', 'Watermelon'];

            fetch(`https://pokeapi.co/api/v2/pokemon`)
            .then(function(response){
                return response.json()
            })
            .then((data) => {
                data.results.forEach((item) => {
                    displayList.push(item.name)
                })
                console.log(displayList)
            })
            .catch((err) => {
                console.log(`Error fetching: ${err}`)
            });

            var list = document.getElementById("myList");
            displayList.forEach((item) => {
                let li = document.createElement("li");
                li.innerText = item;
                list.appendChild(li);
            });

        </script>
    </body>
</html>

I have also tried to put the api pull in a header script tag so it pushes the data before the body is loaded like this:

<!DOCTYPE html>
<html>
    <head>
        <script>
            
            let displayList = ['Apples', 'Oranges', 'Grapes', 'Berries', 'Watermelon'];

            fetch(`https://pokeapi.co/api/v2/pokemon`)
            .then(function(response){
                return response.json()
            })
            .then((data) => {
                data.results.forEach((item) => {
                    displayList.push(item.name)
                })
                console.log(displayList)
            })
            .catch((err) => {
                console.log(`Error fetching: ${err}`)
            });

        </script>
    </head>

    <body>
        <ul id="myList"></ul>
        <script>

            var list = document.getElementById("myList");
            displayList.forEach((item) => {
                let li = document.createElement("li");
                li.innerText = item;
                list.appendChild(li);
            });

        </script>
    </body>
</html>

The data from the pokemon api will be logged in the console, but not in the list that the user will see.

NOTE: This is just a proof of concept, the the code will be moved/formatted as needed after, also I will be my own custom-made api for the final project if this information changes anything

>Solution :

Because you are not using async approach for your displaying part. I just added another then after your api call to show you possible solution

<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <ul id="myList"></ul>
        <script>

            let displayList = ['Apples', 'Oranges', 'Grapes', 'Berries', 'Watermelon'];

            fetch(`https://pokeapi.co/api/v2/pokemon`)
            .then(function(response){
                return response.json()
            })
            .then((data) => {
                data.results.forEach((item) => {
                    displayList.push(item.name)
                })
                console.log(displayList)
            }).then(()=>{
            var list = document.getElementById("myList");
            displayList.forEach((item) => {
                let li = document.createElement("li");
                li.innerText = item;
                list.appendChild(li);
            })
            })
            .catch((err) => {
                console.log(`Error fetching: ${err}`)
            });

             

        </script>
    </body>
</html>

Leave a Reply