Leer archivo JSON y pintar los datos en Tabla HTML del vídeo de Bluuweb!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AJAX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="section">
<button class="btn" id="boton">
JSON
</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
</thead>
<tbody id="response">
</tbody>
</table>
</div>
</div>
<div class="section" id="respuesta"></div>
<script src="AJAX.js"></script>
</body>
</html>
JAVASCRIPT
document.querySelector("#boton").addEventListener('click',getData);
function getData() {
const xhttp = new XMLHttpRequest;
xhttp.open('GET','catalog.json',true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let data = JSON.parse(this.responseText);
let res = document.querySelector('#response');
res.innerHTML = '';
for(let item of data){
res.innerHTML += `
<tr>
<td>${item.title}</td>
<td>${item.artist}</td>
</tr>
`;
}
}
};
}
