no puedo visualizar los datos json


08 de Mayo del 2020 
<!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>

hola a todos, tengo un problema y es que no puedo visualizar los datos de mi archivo json, estoy probando con console.log y los datos estan hay los estoy trayendo, pero por alguna razon no los puedo visualizar en mi inde.html.

 

//console.log('correcto');

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>
`

}

 


}

}
}

este es el json 

 [
{
"titulo": "fernanda",
"country": "Spain"
},
{
"titulo": "nelson",
"country": "rumania"
},
{
"titulo": "montserrat",
"country": "englaterra"
}
]