Para crear una tabla de un array de objetos sencilla, hay que seguir los siguientes pasos como muestro a continuación:
Primero creamos el fichero con extensión .html, dónde vamos a crear un div asociando un id dónde se va a mostrar la tabla con los datos de los elementos. El id de la tabla dentro del html, se llamará de ejemplo «tabla».
<div id="tabla">Una vez que tenemos el id, dónde vamos a construir la tabla, creamos el fichero con extensión .js En este fichero, vamos a desarrollar la parte lógica.
Creamos el fichero con nombre cómo ejemplo main.js, después asociamos este fichero al html de la siguiente manera:
Dentro del fichero JavaScript, declaramos e iniciamos el array de objetos que vamos a querer mostrar en nuestra tabla:
var arrayDeObjetos = [
{
id: 1,
nombre: "DevCodeLight1",
},
{
id: 2,
nombre: "DevCodeLight2",
},
{
id: 3,
nombre: "DevCodeLight3",
}
];Añadimos el siguiente método que se activa cuando el documento HTML se ha cargado y analizado por completo.
document.addEventListener("DOMContentLoaded", function(event) {
});
Creamos una función para crear la lógica del pintado de nuestra tabla de objetos.
Vamos a ir recorriendo los datos con la ayuda de un bucle for, y para cada elemento realizaremos el mismo pintado. En este caso, accederemos a los atributos de los que dispone cada objeto, su id y nombre. Añadimos los atributos dentro de una tabla, cuya etiqueta es <table></table>.
Por último, fuera del bucle, indicamos el id del elemento dónde vamos a querer mostrar la tabla de datos.
function crearTablaObjetos() {
var acumulador = "";
acumulador += " <table> " +
" <thead> " +
" <tr> " +
" <th>Id</th> " +
" <th>Nombre</th> " +
" </tr> " +
" </thead> " +
" <tbody> "
for (var i = 0; i < arrayDeObjetos.length; i++) {
acumulador += " <tr> " +
" <td>" + arrayDeObjetos[i].id + "</td> " +
" <td>" + arrayDeObjetos[i].nombre + "</td> " +
" </tr> ";
}
acumulador += " </tbody> " +
" </table> ";
document.getElementById("tabla").innerHTML = acumulador;
}Llamamos a este método desde la función anteriormente creada, quedando nuestro JavaScript de la siguiente manera.
Para terminar, ejecutamos el index.html en el navegador para descubrir el resultado.
Espero que les sirva de ayuda !!
