In the table needs to show the data for the some users that are linked from the link in the request.Im getting the XMLRequest first and setting RequestHeader.
In function show i am creating th tags for the users for their attributes.I have a issue with users data that needs to be shown below.I can't figure out whats the problem with printing undefined in td tags.
The prototype of the data is 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>More easy to do that with a fetch
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>