2

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!

3 respuestas 3

1

Tienes varios fallos en tu codigo que intentare explicartelo.

Primera forma:

  1. Utilizar querySelector es un poco arriesgado, ya que solo devuelve el primer elemento. ¿Que pasa si el selector(.listaPeliculas) se utiliza en un elemento que no es?
  2. No es necesario recorrer cada clave del objeto por separado, tal y como lo estas haciendo para titulo y año.

Segundo paso:

  1. Cuando haces innerHTML no es acumulativo. Es decir siempre te pondra el ultimo registro.

En total tu codigo con unos cambios quedaria algo asi.

'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'}
]
//Tabla con los contenidos
var listaPeliculas = document.getElementById('tabla');

//Aqui vamos a guardar los tr y td con su informacion.
let tablaContent = ``

//Recoremos las peliculas
//El operador in es para obtener el indice, 
//en cambio of es el objeto en si.

for (const item of peliculas) {
  //Fijate que utilizamos += para acumular los datos. 
  //Template strings syntax
   tablaContent += `
    <tr>
      <td>${item.titulo}</td>
      <td>${item.year}</td>
      <td>${item.pais}</td>
    </td>
  
  `
}
//Finalmente añadimos el contenido a la tabla
listaPeliculas.innerHTML += tablaContent
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!--Añadimos el id a la tabla-->
  <table id="tabla">
    <tr>
      <th id="pelicula">TITULO</th>
      <th id="anio">AÑO</th>
      <th id="pais">PAIS</th>
    </tr>
    
  </table>
</body>
</html>

Espero que te sirva de ayuda.

Saludos!!!

1
  • 1
    Muchas gracias Eugeni por tu clara explicación y los tips sobre mi código. La verdad que me ha resultado bastante sencillo de esta forma, la aplicaré para futuros proyectos. Un saludo!
    – JFelix
    Commented el 30 may. 2019 a las 9:40
0

Creo que este es lo que buscas.

function buildTable(labels, objects, container) {
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  var theadTr = document.createElement('tr');
  for (var i = 0; i < labels.length; i++) {
    var theadTh = document.createElement('th');
    theadTh.innerHTML = labels[i];
    theadTr.appendChild(theadTh);
  }
  thead.appendChild(theadTr);
  table.appendChild(thead);

  for (j = 0; j < objects.length; j++) {
    var tbodyTr = document.createElement('tr');
    for (k = 0; k < labels.length; k++) {
      var tbodyTd = document.createElement('td');
      tbodyTd.innerHTML = objects[j][labels[k].toLowerCase()];
      tbodyTr.appendChild(tbodyTd);
    }
    tbody.appendChild(tbodyTr);
  }
  table.appendChild(tbody);

  container.appendChild(table);
}



var labels3 = ['ID', 'MOVIE TITLE' ,'YEAR', 'COUNTRY'];
var objects3 = [
  {"id": "1",  'movie title': "La verdad duele",  'year': "2014",  'country': "UK"},
  {"id": "1",  'movie title': "Diamantes de sangre",  'year': "2010",  'country': "EEUU"},
  {"id": "1",  'movie title': "Agora",  'year': "2009",  'country': "SPAIN"}
];

buildTable(labels3, objects3, document.getElementById('c'));
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
<div id="c"><p>LISTA DE PELICULAS</p></div>

1
  • 1
    Muchas gracias Emerson, es una muy buena opción también, aunque me resulta más compleja para mi. Me la apunto igualmente! Un saludo!
    – JFelix
    Commented el 30 may. 2019 a las 9:41
0

Esto te valdría, aun que, la respuesta de Emerson es mas elaborada y reusable que esta

'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'}
]

let tabla = document.getElementById("table");

for (const pelicula of peliculas) {
    let tr = document.createElement('tr');
    let tdTitulo = document.createElement('td');
    let tdAnio = document.createElement('td');
    let tdPais = document.createElement('td');
    tdTitulo.innerText = pelicula.titulo;
    tdAnio.innerText = pelicula.year;
    tdPais.innerText = pelicula.pais;
    tr.appendChild(tdTitulo); 
    tr.appendChild(tdAnio); 
    tr.appendChild(tdPais);
    tabla.appendChild(tr); 
  }
<table id="table">
  <tr>
    <th>Pelicula</th>
    <th>Año</th>
    <th>Pais</th>
  </tr>
</table>

1
  • 1
    Muchas gracias llsanchez, me gusta también mucho esta opción, muy aclaratoria, espero poder usarla. Un saludo!
    – JFelix
    Commented el 30 may. 2019 a las 9:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.