<!DOCTYPE html>
<html>
<head>
<title>Obj onclick</title>
<style>
td,th{
border:1px solid gray;
}
</style>
</head>
<body>
<script src="script.js">
request();
function request() {
let xhr = new XMLHttpRequest();
xhr.open('Get', 'https://jsonplaceholder.typicode.com/users');
xhr.send();
xhr.onload = () => getResponse(xhr);
}
function getResponse(xhr){
if (xhr.status === 200) {
let response = JSON.parse(xhr.response);
if (Array.isArray(response)) {
table(response);
}
}
}
function table(data) {
let table = document.createElement('table');
let tr = document.createElement('tr');
let thKeyNames = data[0];
for(let key in thKeyNames) {
if (key !== 'company' && key !== 'address' ) {
let th = document.createElement('th');
th.innerHTML = key.toUpperCase();
tr.append(th);
}
table.append(tr);
}
for(let i = 0; i < data.length; i++) {
let tr = document.createElement('tr');
tr.addEventListener('click', newPerson);
for(let users in data[i]) {
if (users !== 'company' && users !== 'address' ){
let td = document.createElement('td');
td.innerHTML = data[i][users];
tr.append(td);
}
table.append(tr);
}
}
document.body.append(table);
}
</script>
</body>
</html>