AJAX DATA FETCH 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table *{
border: 2px solid black;
padding: 10px;
gap: 10px;
}
</style>
</head>
<body>
<button onclick="fetchData()">click me</button>
</body>
<!-- <script src="./assignment4.js"></script> -->
<script>
const fetchData = ()=>{
var x = new XMLHttpRequest();
x.open("GET","https://jsonplaceholder.typicode.com/users");
x.send();
x.onreadystatechange= ()=>{
console.log(x.readyState);
if( x.status == 200){
console.log(x.responseText);
var data = JSON.parse(x.responseText);
console.log(data);
const string = JSON.stringify(data);
console.log(string);
var table = document.createElement("table");
table.className= "table1"
document.body.appendChild(table);
var tr1 = document.createElement("tr");
var th1 = document.createElement("th");
var th2 = document.createElement("th");
var th3 = document.createElement("th");
var th4 = document.createElement("th");
th1.innerHTML="ID";
th2.innerHTML="Name";
th3.innerHTML = "Username"
th4.innerHTML ="Email";
tr1.appendChild(th1);
tr1.appendChild(th2);
tr1.appendChild(th3);
tr1.appendChild(th4);
table.appendChild(tr1);
for(i = 0 ; i< data.length ; i++){
tr = document.createElement("tr");
td1 = document.createElement("td");
td2 = document.createElement("td");
td3 = document.createElement("td");
td4 = document.createElement("td");
td1.innerHTML=data[i].id;
td2.innerHTML = data[i].name;
td3.innerHTML = data[i].username;
td4.innerHTML = data[i].email;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
}
}
}
</script>
</html>
Comments
Post a Comment