I wanna make a list with pokemons and picture next to each name. i get list from api then combine all names to general APi adress and make array of fetches. My problem was returned list was unordered to order it there is asyns await and console.log name(process function). but it doesn't work/ could you help me with that? Codepen link
(async function(){
await Promise.all(arrForFetch)
.then(async files =>{
for(let i = 0; i < files.length; i++){
// console.log("files", files[i])
process( await files[i].json())
}
// files.forEach( file =>{
// console.log("files", file)
// process( file.json() )
// })
// .catch(err => console.log("tobie pizda ucziekaj"))
})
.catch(err => console.log("tobie pizda ucziekaj"))
})();
let process = (prom) => {
prom.then( data =>{
console.log(data.id)
})
}
By default, the return value of Promise.all will maintain the order that is given. So, in your case, after the Promise.all for arrForFetch finishes, you WILL have an ordered array of response data.
It seems you are trying to convert this response data to JSON format and then display the IDs of individual pokemon. You can use a Promise.all here as well. I modified your implementation a bit in the following piece of code:
let arrForFetch = pokeNames.map(elem => fetch(" https://pokeapi.co/api/v2/pokemon/"+`${elem}` ) );
//multiple APis fetching
Promise.all(arrForFetch).then((jsonData) => {
// creating array to convert each of the data entries to JSON format
let JsonConversionArray = jsonData.map(data => data.json());
// Using Promise.all similar to previous implementation.
Promise.all(JsonConversionArray).then((data) => {
const idArray = data.map((pokemon) => pokemon.id);
console.log(idArray);
})
}).catch((err) => {
console.log(err);
})
However, if you prefer your own solution i.e. without a Promise.all for the JSON conversion, you can do it as follows:
let arrForFetch = pokeNames.map(elem => fetch(" https://pokeapi.co/api/v2/pokemon/"+`${elem}` ) );
//multiple APis fetching
Promise.all(arrForFetch).then((files) => {
// Iterating through files array
for (let i=0; i<files.length; i++) {
// You need not use await here because you are already using a then
// clause in the process() function
process(files[i].json())
}
}).catch((err) => {
console.log(err);
});
// Function to display the id of the pokemon from the JSON
function process (prom) {
prom.then(data => { console.log(data.id) })
}