Estoy empezando con JS y tengo una duda sobre los objetos y como pintar su contenido en tablas.
He creado una tabla con 3 columnas, con PELICULA, AÑO y PAIS.
Dentro de cada una de esas columnas quiero añadir los datos del objeto película, pero no lo consigo.
Lo intenté de varias formas pero no me sale:
¿Cómo podría hacerlo para que me aparezca cada cosa en su columna?
En la primera forma lo hice del siguiente modo y me crea muchos con un :
'use strict'
//Array del objeto
var peliculas = [
{titulo: 'La verdad duele', year: 2014, pais: 'UK'},
{titulo: 'Diamantes de sangre', year: 2010, pais: 'EEUU'},
{titulo: 'Agora', year: 2009, pais: 'España'}
]
//Recorrer peliculas
var listaPeliculas = document.querySelector(".listaPeliculas");
for (const indice in peliculas) {
let tr = document.createElement("tr");
let td = document.createElement("td");
//Titulo
td.append(peliculas[indice].titulo);
tr.append(td);
listaPeliculas.append(tr);
}
for (const year in peliculas) {
let tr = document.createElement("tr");
let td = document.createElement("td");
//Año
td.append(peliculas[year].year);
tr.append(td);
listaPeliculas.append(tr);
}
En la segunda forma lo hice de este modo y solo me aparece la última película y no sé porqué. Para ello creado en el html esto:
<tr>
<td id="pelicula"></td>
<td id="anio"></td>
<td id="pais"></td>
</tr>
'use strict'
//Array del objeto
var peliculas = [
{titulo: 'La verdad duele', year: 2014, pais: 'UK'},
{titulo: 'Diamantes de sangre', year: 2010, pais: 'EEUU'},
{titulo: 'Agora', year: 2009, pais: 'España'}
]
console.log(peliculas);
//Recorrer peliculas
var pelicula = document.querySelector("#pelicula");
var anio = document.querySelector("#anio");
var pais = document.querySelector("#pais");
for (const indice in peliculas) {
pelicula.innerHTML = peliculas[indice].titulo;
anio.innerHTML = peliculas[indice].year;
pais.innerHTML = peliculas[indice].pais;
}
Espero que alguien me pueda ayudar, Muchas gracias!