En la tabla, debe mostrar los datos de algunos usuarios que están vinculados desde el enlace en la solicitud. Primero obtengo XMLRequest y configuro RequestHeader.
En la demostración de la función, estoy creando las etiquetas para los usuarios para sus atributos. Tengo un problema con los datos de los usuarios que deben mostrarse a continuación. No puedo entender cuál es el problema con la impresión indefinida en las etiquetas td.
El prototipo de los datos es Object.
<script> var request = new XMLHttpRequest(); request.open("GET","https://dummyapi.io/data/v1/user") request.setRequestHeader("app-id","6176d770ceedfe1a52297285"); request.onreadystatechange = async function () { var json = JSON.parse(request.responseText); var f = json.data; var obj = Object.assign({},json.data); console.log(obj); show(obj); } request.send(); function show(data) { let tab = `<tr> <th>Id</th> <th>Title</th> <th>First Name</th> <th>Last Name</th> <th>Picture</th> </tr>`; for (var r in data) { tab += `<tr> <td>${r.id} </td> <td>${r.title}</td> <td>${r.firstName}</td> <td>${r.lastName}</td> <td>${r.picture}</td> </tr>`; } document.getElementById("employees").innerHTML = tab; } // show(data); </script> <h1>Registered Employees</h1> <table id="employees"></table> </body>Más fácil de hacer eso con una búsqueda
const tEmployees = document.querySelector('#employees tbody') fetch('https://dummyapi.io/data/v1/user', { method: 'GET', headers: { 'app-id': '6176d770ceedfe1a52297285' } }) .then( res => res.json()) .then( employees => { employees.data.forEach(emp => { let newRow = tEmployees.insertRow() newRow.insertCell().textContent = emp.id newRow.insertCell().textContent = emp.title newRow.insertCell().textContent = emp.firstName newRow.insertCell().textContent = emp.lastName newRow.insertCell().innerHTML = `<img src="${emp.picture}" alt="${emp.firstName} – ${emp.lastName}" width="72" height="72">` }) }) .catch((error) => console.error('Error:', error) ) body { font-family : Arial, Helvetica, sans-serif; font-size : 14px; } table { border-collapse : collapse; margin : 2em 1em; } td,th { padding : .2em .8em; border : 1px solid darkblue; } thead { background-color: steelblue; } <h1>Registered Employees</h1> <table id="employees"> <thead> <tr> <th>Id</th> <th>Title</th> <th>First Name</th> <th>Last Name</th> <th>Picture</th> </tr> </thead> <tbody></tbody> </table>