Блог

я пытаюсь отобразить некоторые карты pokemon с данными, которые я привожу из API (pokemonAPI). Я могу вывести все данные, которые мне нужны, из API, за исключением типа и возможностей. Но это не главные проблемы, так как я уже привожу самые важные данные, которые мне нужны. Моя проблема возникает внутри foreach, который не является функцией renderPokemons. Любая подсказка, могу ли я решить это?

 

const getAllPokemons =  async (url) => {
    try {
        const pokemons = await fetch(url);
        return pokemons.json()
    }catch (e) {
        console.log(e)
    }
}
const getSinglePokemon =  async (url) => {
    try {
        const pokemon = await fetch(url);
        return  pokemon.json()
    }catch (e) {
        console.log(e)
    }
}
document.addEventListener('DOMContentLoaded',async (ev)=> {
    const URL  = 'https://pokeapi.co/api/v2/pokemon';
    const pokemons  = await getAllPokemons(URL);
    const pomekonDataPromises = pokemons.results.map (async pokemon => {
        const pokeTemp = await getSinglePokemon(pokemon.url)
        return {
            name: pokemon.name,
            weight : pokeTemp.weight,
            height : pokeTemp.height,
            // type: pokeTemp.types.type.name,
            image : pokeTemp.sprites.other.dream_world.front_default,

        }
    })
    const pokemonJson = await Promise.all (pomekonDataPromises)
    console.log(pokemonJson)

    const parentContainer = document.querySelector('.containerCards');
    renderPokemons(parentContainer,pokemonJson);
})

////FUNCTION TO RENDER POKEMONS
const renderPokemons = (parent,apiResponse) => {
    apiResponse.forEach((data) => {
        const parentTemplate = document.createElement('div');
        parentTemplate.innerHTML=`<div class="card" style="width: 18rem;">
        <img class="img card-img-top" src="${data.sprites.other.dream_world.front_default}" alt="Pokemon image">
        <div class="card-body">
          <h5 class="name card-title">Name:</h5>
          <p class="weight card-text">Weight: </p>
          <p class="height card-text">Height: </p>
        </div>
      </div>`
      parent.appendChild(parentTemplate)
    });
}

 

sprites.other.dream_world.front_default не существует в data . Этот путь существует в исходных данных, но не в объекте, созданном в прослушивателе событий. У него есть только name, weight, height, and image . Изменение его на data.image будет работать.

 const getAllPokemons = async(url) => {
  try {
    const pokemons = await fetch(url);
    return pokemons.json()
  } catch (e) {
    console.log(e)
  }
}
const getSinglePokemon = async(url) => {
  try {
    const pokemon = await fetch(url);
    return pokemon.json()
  } catch (e) {
    console.log(e)
  }
}
document.addEventListener('DOMContentLoaded', async(ev) => {
  const URL = 'https://pokeapi.co/api/v2/pokemon';
  const pokemons = await getAllPokemons(URL);
  const pomekonDataPromises = pokemons.results.map(async pokemon => {
    const pokeTemp = await getSinglePokemon(pokemon.url)
    return {
      name: pokemon.name,
      weight: pokeTemp.weight,
      height: pokeTemp.height,
      // type: pokeTemp.types.type.name,
      image: pokeTemp.sprites.other.dream_world.front_default

    }
  })
  const pokemonJson = await Promise.all(pomekonDataPromises)

  const parentContainer = document.querySelector('.containerCards');
  renderPokemons(parentContainer, pokemonJson);
})

////FUNCTION TO RENDER POKEMONS
const renderPokemons = (parent, apiResponse) => {
  apiResponse.forEach((data) => {
    const parentTemplate = document.createElement('div');
    parentTemplate.innerHTML = `<div class="card" style="width: 18rem;">
        <img class="img card-img-top" src="${data.image}" alt="Pokemon image">
        <div class="card-body">
          <h5 class="name card-title">Name: ${data.name}</h5>
          <p class="weight card-text">Weight: ${data.weight}</p>
          <p class="height card-text">Height: ${data.height}</p>
        </div>
      </div>`
    parent.appendChild(parentTemplate)
  });
} 

 <div class="containerCards"></div>