0

Hola estoy recorriendo un array en javascript, y me dice undefined, el caso es que me lo recorre, pero no muestra los datos, donde estaría el error ? Gracias de antemano...!

var div1 = document.createElement("div");
div1.setAttribute("id", "div1");
var div2 = document.createElement("div");
div2.setAttribute("id", "div2");
var div3 = document.createElement("div");
div3.setAttribute("id", "resultado");

document.body.appendChild(div1);
document.body.appendChild(div2);
document.body.appendChild(div3);

    const xhttp = new XMLHttpRequest();

    let data = [];

    let url1 = 'https://reqres.in/api/users';

    xhttp.open('GET',url1,true);
    xhttp.send();

    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            let datos = JSON.parse(this.responseText);
            console.log(datos);

            let resultado = document.querySelector('#resultado');
            resultado.innerHTML = '';

            for(let item in datos){
              [item.first_name,item.last_name,item.avatar];

                var div = document.createElement('div');
                var p0 = document.createElement('p');
                var p1 = document.createElement('p');
                var p2 = document.createElement('p');
                
                var hr = document.createElement('hr');

                p0.innerHTML = item.first_name;
                p1.innerHTML = item.last_name;
                p2.innerHTML = item.avatar

                div.appendChild(hr);
                div.appendChild(p0).appendChild(p1);
                
                div.appendChild(p2);

                console.log(item);
                resultado.appendChild(div);
            }

        }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 3</title>
</head>
<body>
    <script src="api.js"></script>
</body>
</html>

1 respuesta 1

2

El problema está que recorres todo el arreglo y lo que buscas es recorrer la parte data para extraer los datos de los usuarios

var div1 = document.createElement("div");
div1.setAttribute("id", "div1");
var div2 = document.createElement("div");
div2.setAttribute("id", "div2");
var div3 = document.createElement("div");
div3.setAttribute("id", "resultado");

document.body.appendChild(div1);
document.body.appendChild(div2);
document.body.appendChild(div3);

    const xhttp = new XMLHttpRequest();

    let data = [];

    let url1 = 'https://reqres.in/api/users';

    xhttp.open('GET',url1,true);
    xhttp.send();

    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            let datos = JSON.parse(this.responseText);

            // aquí solo agregué ['data']
            console.log(datos['data']);

            let resultado = document.querySelector('#resultado');
            resultado.innerHTML = '';
            
            //len variable donde guardo tamaño del array datos['data'] 
            len = datos['data'].length;
            //cambié a un for tradicional
            for(let i =0 ; i<len ; i++){
              //igualo la variable item a la correspondiente iteración 
              let item = datos['data'][i];
              [item.first_name,item.last_name,item.avatar];

                var div = document.createElement('div');
                var p0 = document.createElement('p');
                var p1 = document.createElement('p');
                var p2 = document.createElement('p');
                
                var hr = document.createElement('hr');

                p0.innerHTML = item.first_name;
                p1.innerHTML = item.last_name;
                p2.innerHTML = item.avatar

                div.appendChild(hr);
                div.appendChild(p0).appendChild(p1);
                
                div.appendChild(p2);

                console.log(item.first_name);
                resultado.appendChild(div);
            }

        }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 3</title>
</head>
<body>
    <script src="api.js"></script>
</body>
</html>

2
  • muchas gracias por la respuesta @alejandro00, era lo que estaba buscando, un saludo ! Commented el 18 may. 2021 a las 18:35
  • listo borrado @alejandro00 ya hice la pregunta de nuevo un saludo ! Commented el 18 may. 2021 a las 20:03

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.