Random order API list

Issue

I made a Pokédex using HTML,CSS and Javascript. I had to generate the Pokemon list with (https://pokeapi.co/). Meanwhile, when displaying the list I found out that it's not in order and when I refresh the page it switches the order again. Can someone please let me know what's the issue...

Here's my code below 👇

document.addEventListener('DOMContentLoaded', function () {
    const pokemonList = document.querySelector('.pokemon-list');
    const pokemonDetails = document.querySelector('.pokemon-details');

    function fetchPokemonDetails(id) {
        fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
            .then(response => response.json())
            .then(data => displayPokemonDetails(data));
    }

    function displayPokemonDetails(pokemon) {
        pokemonDetails.innerHTML = `
            <h2>${pokemon.name}</h2>
            <img src="${pokemon.sprites.front_default}" alt="${pokemon.name}">
            <p>Height: ${pokemon.height} dm</p>
            <p>Weight: ${pokemon.weight} hg</p>
        `;

        pokemonDetails.style.display = 'block';
    }


    function displayPokemon(pokemon) {
        const pokemonCard = document.createElement('div');
        pokemonCard.classList.add('pokemon');
        pokemonCard.dataset.id = pokemon.id;

        pokemonCard.innerHTML = `
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" alt="${pokemon.name}">
            <p>${pokemon.name}</p>
        `;

        pokemonCard.addEventListener('click', function () {
            const id = this.dataset.id;
            fetchPokemonDetails(id);
        });

        pokemonList.appendChild(pokemonCard);
    }


    for (let i = 1; i <= 1016; i++) {
        fetch(`https://pokeapi.co/api/v2/pokemon/${i}`)
            .then(response => response.json())
            .then(data => displayPokemon(data));
    }

    pokemonList.sort((a, b) => a.id - b.id);

});

Here's a preview of the list:enter image description here

Here's a preview after refreshing:enter image description here

Solution

Because every fetch function's response time is different.

For example, for 1 , 2 you call fetch(http/.../1) before fetch(http/.../2). right?

But server can response fetch(http/.../1) after fetch(http/.../2) because of so many reasons such as network problems.

To solve this problem, you have to use async and await.

if you use this, fetch(http/.../2) is called after fetch(http/.../1)'s response is come.

I add code below.

-javascript

document.addEventListener('DOMContentLoaded', async function () {

...

for (let i = 1; i <= 1016; i++) {
  await fetch(`https://pokeapi.co/api/v2/pokemon/${i}`)
    .then((response) => response.json())
    .then((data) => {
      displayPokemon(data);
    });
}

//don't need to sort because everytime you reload page, the result is same.

I think it'll works and can help you enoughly.

Good luck.

Answered By - J.Porter