DOM does not render the info I pick from the API jsonplaceholder. Just want to render some authors and abstracts.
This is my HTML code, and JS:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - Lista de Comentarios</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.flex article {
width: calc(50% - 20px);
margin: 10px;
padding: 10px;
border: 2px solid black;
}
.flex article:nth-child(even)
{
background-color: #f0f0f0;
}
select {
border: 2px solid tomato;
width: 80%;
padding: 20px;
margin: 20px auto 0px auto;
display: block;
font-size: 150%;
}
hr {
margin: 20px;
}
</style>
</head>
<body>
<header>
<select id="selectAutor">
<option value="" selected>Selecciona un autor</option>
<option value="1">Autor 1</option>
<option value="2">Autor 2</option>
<option value="3">Autor 3</option>
<!-- Añadir más opciones según sea necesario -->
</select>
<hr>
</header>
<section id="comentarios" class="flex">
<!-- esta es la superficie iterable que hay que repetir por cada comentario -->
<article>
<h3>Nombre del autor</h3>
<p>Email: [email protected]</p>
<p>Comentario:</p>
<p>Texto del comentario</p>
</article>
</section>
<script src="script.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', () => {
// Función para obtener los comentarios de la API REST
async function obtenerComentarios() {
const url = '...URL...jsonplaceholder...';
try {
const response = await fetch(url);
const comentarios = await response.json();
return comentarios;
} catch (error) {
console.error('Error al obtener los comentarios:', error);
throw new Error('Error al obtener los comentarios');
}
}
// Función para mostrar los comentarios de un autor seleccionado
async function mostrarComentariosPorAutor(idAutor) {
console.log('ID del autor seleccionado:', idAutor);
try {
// Obtener todos los comentarios
const comentarios = await obtenerComentarios();
console.log('Comentarios obtenidos:', comentarios);
// Filtrar los comentarios del autor seleccionado
const comentariosAutor = comentarios.filter(comentario => comentario.userId == idAutor);
console.log('Comentarios del autor seleccionado:', comentariosAutor);
// Seleccionar el contenedor de comentarios en el DOM
const contenedorComentarios = document.getElementById('comentarios');
contenedorComentarios.innerHTML = '';
// Mostrar cada comentario del autor seleccionado en el DOM
comentariosAutor.forEach(comentario => {
const article = document.createElement('article');
article.innerHTML = `
<h3>Nombre del autor: ${comentario.name}</h3>
<p>Email: ${comentario.email}</p>
<p>Comentario:</p>
<p>${comentario.body}</p>
`;
contenedorComentarios.appendChild(article);
});
} catch (error) {
console.error('Error al mostrar los comentarios:', error);
}
}
// Manejar el evento de cambio en el selector de autor
document.getElementById('selectAutor').addEventListener('change', event => {
console.log('Evento de cambio detectado');
const idAutor = parseInt(event.target.value);
console.log('ID del autor seleccionado:', idAutor);
if (idAutor) {
mostrarComentariosPorAutor(idAutor);
}
});
});
2
Answers
I translated your code to english and added some demo JSON. it works:
https://jsfiddle.net/gtpo4j3m/
so I guess you should check your JSON response by doing something like:
The response should be similar to the getComments() function in the jsfiddle. What does it say?
I assume that OP was referring to the resource https://jsonplaceholder.typicode.com and therefore I prepared the following snippet to collect comments to posts a certain user (=author) has committed.
Maybe this is was OP wanted? In any case, there are a few patterns in here that might be helpful otherwise.