> Faqs > No puedo procesar un JSON para representarlo en la página, aunque por consola veo que está ahí

No puedo procesar un JSON para representarlo en la página, aunque por consola veo que está ahí

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

			}

		}

	}
}
Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Hola!

No he probado tu código, pero aparentemente tiene un problema en el bucle for:

Así es como lo tienes:

for(var i of datos){
	//console.log(i.country);
	res.innerHTML += `
		<tr>
			<td>${item.titulo}</td>
			<td>${item.country}</td>
		</tr>
	`
}

Fíjate que tienes una variable "i" que es la que va tomando cada valor del bucle. Pero sin embargo, cuando muestras el elemento en la fila correspondiente, usas una variable llamada "item". Supongo que tendrías que usar la variable "i". ¿no?

for(var i of datos){
	//console.log(i.country);
	res.innerHTML += `
		<tr>
			<td>${i.titulo}</td>
			<td>${i.country}</td>
		</tr>
	`
}
Alba
142 2 10 4