I have this code where Im trying to print the content of the 'stats' array from the pokeapi, but when the function is called in the browser I just get the last element of that array.
How to get it all in the HTML side? Thanks!
main.js:
fetch(apiURL).then(response => {
response.json();
}
.then(data => {
let array
for(let i=0; i<data.stats.length; i++ ) {
array = data.stats[i].stat.name;
console.log(array); // <- I have all the array content here
}
pokemonFoundStats = array;
console.log(pokemonFoundStats); // <- I just get the last element from the array
pokemonStats(pokemonFoundStats);
}) };
// function for printing in the html
const pokemonStats = (pokemonStatsInfo) => {
const allStats = document.getElementById("poke-screen-id");
allStats.value = ` Stats: ${pokemonStatsInfo}`;
};
HTML: Where I try to print the array content
<input id="poke-screen-id" type="text" placeholder="stats">
please find below the code. Or check on code sandbox here dummy data. https://codesandbox.io/s/javascript-forked-ch6bky?file=/index.js
fetch(apiURL)
.then((response) => response.json())
.then((data) => {
let array = [];
for(let i=0; i<data.stats.length; i++ ) {
array.push(data.stats[i].stat.name;);
// console.log(array);
pokemonStats(array);
}
});
// function for printing in the html
const pokemonStats = (pokemonStatsInfo) => {
const allStats = document.getElementById("poke-screen-id");
allStats.value = `Stats: ${pokemonStatsInfo}`;
};