1

Estimados buenas tardes!!

Soy nuevo en JS y he tratado de obtener os datos de un array que guarde con los links de unas imagenes obtenidas a través del llamado de una API y cuando utilizo la funcion cargar imagen note que al tratar de acceder al array de imagenes me aparece como undefined??

Aguardo comentarios

Muchas gracias!!

let box = document.querySelectorAll('.box');

box = Array.from(box);

let images = [];

async function llamarAPI(){
    
    const response = await fetch('https://api.github.com/users');
    const result = await response.json();
    return result;
    
}

llamarAPI().then(result=>{
    
    for (const x of result) {
        images.push(img.avatar_url);      
    }
    
});

function cargarImagen() {  
        
    for (const i in images) {
       box[i].innerHTML = `<img src="${images[i]}" alt="${i}">`; 
       console.log(i);      
    } 
       
}

cargarImagen();

1 respuesta 1

1

Tu error es bastante común. Todos los días llega algún usuario intentando devolver algo que no sea una promesa de una función asincrónica y esperando que su código asíncrono se ejecute de forma síncrona, y siempre los remito a lo que se ha convertido en casi una lectura obligatoria en stack overflow: https://es.stackoverflow.com/a/364745/186586

Te explico como funciona tu código actualmente:

  1. El navegador inicia la petición en llamarAPI() y procede a seguir ejecutando tu código en lo que la petición se resuelve.
  2. Llama a la función cargarImagen(); y se encuentra con que el arreglo de imágenes está vacío. Por tanto termina la ejecución de la función.
  3. Luego resuelve la petición, pero no hace nada con los datos, porque no le has dicho que hacer con ellos una vez resueltos.

Ahora que estás empezando recuerda dos cosas MUY IMPORTANTES:

Una función asincrónica SIEMPRE devuelve una promesa.

Los datos de una petición debes consumirlos dentro del then o bien desde una función async. No puedes retornarlo como si fuera código sincrónico, porque se retornaran los datos envueltos en una promesa.

Repasa por favor los conceptos de asincronía en javascript y lee el enlace a la respuesta que te adjunté, es básicamente la respuesta a tu pregunta.

En cuanto a tu código, te lo adjunto adaptado para que funcione y puedes ejecutarlo desde acá. La idea es:

  1. Haces la petición a la api.
  2. Luego (then), cuando la petición esté lista, extraes las imágenes de lo que te llegó.
  3. Luego, cuando se hayan extraído las imágenes, insertas los elementos al DOM

Nota que todo sigue una secuencia lógica, solo cuando una cosa se resuelva, ENTONCES (then) se hace la otra.

let box = document.querySelector('#box');

async function llamarAPI() {
    const response = await fetch('https://api.github.com/users');
    const result = await response.json();
    return result;
}

async function extraerImagenes(result){
    let images = [];
    for (const x of result) {
        images.push(x.avatar_url);
    }
    return images
}

function cargarImagen(images) {
    for (const i of images) {
        const img = document.createElement('img');
        img.setAttribute("width", "100");
        img.setAttribute("height", "100");
        img.setAttribute('src', i);
        box.appendChild(img);
    }
}

llamarAPI()
    .then(extraerImagenes)
    .then(cargarImagen)
<div id="box"></div>

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.