JSON/AJAX DATA FETCH
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>phone</th>
<th>email</th>
</tr>
</thead>
<tbody id="container">
</tbody>
</table>
<input type="button" value="fetch data" onclick="fetchdata()">
<script>
function fetchdata()
{
const xhr=new XMLHttpRequest();
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.onreadystatechange=()=>{
if(xhr.readyState==4 && xhr.status==200){
const data=JSON.parse(xhr.responseText);
console.log(data);
const container1=document .getElementById("container");
for(i=0;i<data.length;i++){
const row=document.createElement("tr");
const idcol=document.createElement("td");
const namecol=document.createElement("td");
const phonecol= document.createElement("td");
const mailcol= document.createElement("td");
idcol.innerHTML=data[i].id;
namecol.innerHTML=data[i].name;
phonecol.innerHTML=data[i].phone;
mailcol.innerHTML=data[i].email;
row.appendChild(idcol);
row.appendChild(namecol);
row.appendChild(phonecol);
row.appendChild(mailcol);
container.appendChild(row);
}
}
}
}
</script>
</body>
</html>
Comments
Post a Comment