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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.