javascript

import { Heroes } from "../../data/heroes";

/**
 * 
 * @param {HTMLDivElement} element 
 */
export const forAwaitComponent = async( element ) => {

  console.log('forAwaitComponent');

  const id='5d86371f2343e37870b91ef1';
  // const hereo = await getHeroAsync(id);
  // element.innerHTML =  hereo.name;

  const HeroesId = Heroes.map(heroe=>heroe.id);
  const HeroePromes = getHeroesAsync(HeroesId);

  for await(const heroe of HeroePromes ){
    element.innerHTML +=`${heroe.name} <br>`;

  }



}

/**
 * 
 * @param {Array<String>} heroIds 
 * @returns {Array<Promise>}
 */
const getHeroesAsync = ( heroIds ) => {
    
    const heroPromises = [];

    heroIds.forEach( id => {
        heroPromises.push( getHeroAsync(id)  );
    });

    return heroPromises;
}

const getHeroAsync = async(id) => {

    await new Promise(( resolve ) => {
        setTimeout(() => resolve(), 1000)
    });

    return Heroes.find( hero => hero.id === id );
}