!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leer JSON con JavaScript</title>
</head>
<body>
<h1>Lectura de JSON con JavaScript</h1>
<div id="resultado"></div>
<script>
// Función para leer un JSON
async function leerJSON() {
try {
// Hacemos la petición
const respuesta = await fetch('datos.json');
// Verificamos si la respuesta es correcta
if (!respuesta.ok) {
throw new Error('Red no ok');
}
// Convertimos la respuesta a JSON
const datos = await respuesta.json();
// Llamamos a la función que muestra los datos
mostrarDatos(datos);
} catch (error) {
console.error('Ha habido un problema:', error);
}
}
// Función para mostrar los datos en el HTML
function mostrarDatos(datos) {
const resultadoDiv = document.getElementById('resultado');
resultadoDiv.innerHTML = '<h2>Usuarios</h2>';
// Iteramos sobre los usuarios y mostramos la información
datos.usuarios.forEach(usuario => {
const usuarioDiv = document.createElement('div');
usuarioDiv.innerHTML = `<strong>Nombre:</strong> ${usuario.nombre}<br>
<strong>Edad:</strong> ${usuario.edad}<br>
<strong>Hobbies:</strong> ${usuario.hobbies.join(', ')}<br><br>`;
resultadoDiv.appendChild(usuarioDiv);
});
}
// Llamamos a la función al cargar la página
window.onload = leerJSON;
</script>
</body>
</html>