0

estoy aprendiendo a consumir APIS con Axios y React, y tengo un pequeño problema, al momento de acceder al array de la api me sale de la siguiente forma:

introducir la descripción de la imagen aquí

Lo cual esta bien por que es la forma que tengo de poder mostrar a todos los pokemons con un recorrido .map por que lo convierto a un objeto (Si no mal entendí, si estoy diciendo algo estúpido por favor corríjanme)

 console.log(' Intentando acceder a las imagenes=  ', {pokemons}.pokemons[3].url)

Lo que me devuelve la consola es lo siguiente:

introducir la descripción de la imagen aquí

Entonces, entro a la URL y lo que me muestra es lo siguiente:

introducir la descripción de la imagen aquí

Y la forma en la que lo razone yo es poner el .sprite al final del console.log, pero me devuelve un undefined.

No se como hacer para manipular las cosas dentro de la url que me devuelve la API.

Muchas gracias por su ayuda

El codigo donde obtengo la API es el siguiente:

  componentDidMount() {

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

    console.log(' Intentando acceder a las imagenes=  ', {pokemons}.pokemons[3].url.sprites)
  })



}
2
  • Pero no entiendo a que dato quieres acceder.. ¿? el 22 may. 2021 a las 2:42
  • A cualquiera dentro de pokemons.url el 22 may. 2021 a las 4:49

1 respuesta 1

1

Tienes que hacer una nueva petición al API con la url para obtener los datos :

 axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151&offset=151') //Solicitud api
          .then(({ data }) => {         
            const { results: pokemons } = data;          
            axios.get(pokemons[3].url)
              .then(({data}) => {
                console.log(data.sprites)                
              })    
            
            this.setState({ pokemons });
          })
5
  • Deberia hacer la peticion dentro del mismo componentDidMount ? el 22 may. 2021 a las 20:32
  • No me funciona, no me paran de salir errores el 22 may. 2021 a las 20:45
  • Si dentro de componentDidMount, aunque también podría estar separado en su propio método. Te dejo el codesandbox del ejemplo: codesandbox.io/s/silly-hamilton-nxc55?file=/src/App.js
    – davidbug
    el 23 may. 2021 a las 2:12
  • Gracias, voy a probarlo mañana por la mañana el 23 may. 2021 a las 2:28
  • Muchas gracias, me sirvio, aprendi otra cosa que se puede hacer con axios, pero tengo otra duda, como puedo hacer para agarrar la url de todos los pokemon, porque de esa forma solo obtengo la imagen de uno el 23 may. 2021 a las 2:58

Tu Respuesta

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

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