Buenos dias, estoy tratando de visualizar mi archivo JSON en mi pagina html, pero no puedo. Al revisar por consola, los datos estan alli.
Los estoy capturando correptamente. No sé qué estará mal. Lo he revisado muchas veces.
Este es el JSON que estoy accediendo:
[
{
"titulo": "fernanda",
"country": "Spain"
},
{
"titulo": "nelson",
"country": "rumania"
},
{
"titulo": "montserrat",
"country": "englaterra"
}
]
Este es el código de mi página:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ajax Json</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<div class = "container">
<div class = "section">
<button class = "btn" id = "boton">Enviar Peticion</button>
<table>
<thead>
<tr>
<th>Titulo</th>
<th>Country</th>
</tr>
</thead>
<tbody id = "res"></tbody>
</table>
</div>
</div>
<script src = "ajax.js"></script>
</body>
</html>
Este es mi Javascript:
document.querySelector('#boton').addEventListener('click', traerDatos);
function traerDatos(){
//console.log('dentro');
var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'ejemploJSON.json', true);
xhttp.send();
xhttp.onreadystatechange = function(){
if(xhttp.readyState == 4 && xhttp.status == 200){
//console.log(xhttp.responseText);
var datos = JSON.parse(xhttp.responseText);
//console.log(datos);
var res = document.querySelector('#res');
res.innerHTML = '';
for(var i of datos){
//console.log(i.country);
res.innerHTML += `
<tr>
<td>${item.titulo}</td>
<td>${item.country}</td>
</tr>
`
}
}
}
}