1

Tengo una pequeña duda que estoy intentando resolver por mi cuenta hace varios días y no lo puedo lograr, la idea que tengo es hacer una pequeña pokedex donde muestre el nombre y la imagen de cada pokemon, esta la quiero hacer generando con una API del pokemon con el id 1 al id 151, ya pude generar los nombres, pero el problema es que la imagen esta dentro de una URL, aquí un ejemplo:

Pokemon

Y una vez dentro de la url obtenida, esto es la información que hay: introducir la descripción de la imagen aquí

Bien, ya habiendo podido acceder ahi mediante el siguiente codigo:

componentDidMount() {
axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151&offset=151') //Solicitud api de los pokemon
  .then(({ data }) => { 
    const { results: pokemons } = data; //Destructuracion
    this.setState({ pokemons });

    console.log({pokemons})
    axios.get(pokemons[4].url) //Entro a la URL del pokemon 4
      .then(({ data: pokemon }) => {
        this.setState({ pokemon })
        console.log('aaaa', {pokemon})
      })
  })


}

Lo que yo quiero hacer, es poder entrar a la URL de todos los pokemon, esto pienso que es cambiando el indice que esta en

axios.get(pokemons[ACA].url)

y luego quiero mostrarlo aca:

    render() {
    return (
      <div>
     //   <img src="{this.state.pokemon.sprites.front_default}" alt="" />
        <div id="container">
          <div className="grid-style">
            {this.state.pokemons.map((pokemon) => ( //Aca muestro los nombres
              <div className="item"
                key="{ID}">
                <p className="texto">{pokemon.name}</p>
              </div>
            ))}

          </div>
        </div>
      </div>
    );
  }
}

Ya pude generar los nombres usando la destructuración, mi problema actual es como generar todas las imágenes.

Si alguien sabe como puedo hacer para sacar todas las imágenes de los pokemon de la URL obtenida de la API, me serviría saberlo.

1 respuesta 1

1

El problema es que no estas recorriendo cada uno de los "pokemon" para buscar la imagen de cada uno.

Solución:

Buscar la info de todos los pokemon obtenidos en paralelo (hasta no tener TODOS, no se ve ninguno)

Ejemplo:

//Solicitud api de los pokemon
axios.get('https://pokeapi.co/api/v2/pokemon/?limit=5&offset=0')
  .then(async(res) => {
    // Arreglo donde guardamos la info de los pockemons
    let pokemons = [];
    // Por cada resultado buscamos la info
    await axios.all(res.data.results.map((pokemon) => {
      //Solicitud api del pokemon
      return axios.get(pokemon.url)
        .then((res) => {
          // Guardamos la respuesta de la api https://pokeapi.co/api/v2/pokemon/[ID]/
          pokemons.push(res.data);
          // Comentario: Se puede guardar solo lo que es necesario, ej, name, sprites, etc.
        })
    }));

    // Descomentar
    //this.setState({ pokemons });

    // --- Borrar desde ---
    // Ejemplo: info del pokemon 1
    let pokemon = pokemons[1];
    console.log('name:', pokemon.name);
    console.log('front default:', pokemon.sprites.front_default);
    // --- Borrar hasta ---
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

3
  • Hola, ya pude mostrar la url de la imagen y los nombres por consola, pero no puedo llevarlo al render del HTML, intente con this.setState({pokemons}), y en el constructor los declare, pero me dice que esta indefinido, tenes idea como poder solucionarlo? Commented el 24 may. 2021 a las 21:29
  • Aca esta el codigo que tengo, con el render y el .map, capaz te sirva: codepen.io/eliiansito01/pen/ExWmdZP Commented el 24 may. 2021 a las 21:37
  • Lo pude solucionar Marcos, Muchas gracias por todo! Commented el 24 may. 2021 a las 21:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.