3

¿cómo están? Tengo este problema a la hora de traer los usuarios desde github mediante fetch, quizás alguien pueda darme una mano, el problema que tengo es que las imágenes salen repetidas a la hora de imprimirlos en el dom, lo que quiero es que dentro de las img salga un usuario y luego en la otra salga otro usuario diferente, espero se entienda, muchas gracias.

async function getAvatarPhoto(names) {  
    let jobs = [];

    for (let name of names) {
        let job = fetch(`https://api.github.com/users/${name}`).then(
                successResponse => {
                    if (successResponse.status != 200) {
                        return null;
                    } else {
                        return successResponse.json();
                    }
                },
                failResponse => {
                    return null;
                }
            )
            .then((myJson) => {
                let avatar = myJson.avatar_url;
                let img2 = document.querySelector("#images .img2");
                let img3 = document.querySelector("#images .img3");
                img2.src = avatar;
                img3.src = avatar;
                console.log(avatar);
            })           

        jobs.push(job);
    }

    let results = await Promise.all(jobs);

    return results;
}


console.log(getAvatarPhoto(["agustinven", "KlausPost"]));
       <article id="cuerpo-web">
            <div id="images">
                <img src="/img/tesla-roadster-2020-2017_05-nestandard1.jpg" alt="tesla" class="img2">
                <img src="/img/tesla_roadster_20.jpeg" alt="tesla" class="img3">
            </div>
   
        </article>

1 respuesta 1

3

El problema se encuentra al momento de mostrar la información, mas especifico en estas dos lineas (en realidad es un problema de lógica)

img2.src = avatar;
img3.src = avatar;

porque siempre sobre escribirá la ultima llamada ajax a las imágenes del anterior usuario, existen infinitas formas de solucionarlo, yo lo hice de la siguiente forma cambie el html y para eso utilice la etiqueta [template][1]

<template id="modeloTag">
    <fieldset>
        <legend></legend>
        <figure>
            <img src="" alt="tesla" class="img2">
            <figcaption>
            </figcaption>
        </figure>
    </fieldset>

</template>

y el script que cambie

.then((myJson) => {
    let avatar = myJson.avatar_url
    // en esta linea
    let $template = document.querySelector('#modeloTag')
    $template.content.querySelector('.img2').src = avatar
    $template.content.querySelector('legend').textContent = myJson.login
    $template.content.querySelector('figcaption').textContent = myJson.name
    document.querySelector('#cuerpo-web').append(document.importNode($template.content, true))
    console.log(avatar)
  })

de esta forma siempre que se realice un peticion se insertara nuevo html

1
  • Genial, muchas gracias, me funciono, pero por otro lado se crearon dos fieldset y copiaron todo el contenido por dos jaj quedando uno arriba del otro, yo tenia mas codigo html ademas del que pase de ejemplo y ahora como que se duplico dos veces jaja, de todas formas me diste la solucion a este problema, GRACIAS. Commented el 31 dic. 2019 a las 1:29

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.