Para crear una lista 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 lista de elementos. El id de la lista, en este caso se llamará de ejemplo «lista».
<div id="lista">Una vez que tenemos el id, dónde vamos a construir la lista, 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 lista:
var arrayDeObjetos = [
{
id: 1,
nombre: "DevCodeLight1",
},
{
id: 2,
nombre: "DevCodeLight2",
},
{
id: 2,
nombre: "DevCodeLight2",
}
];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 lista 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 lista, cuya etiqueta es <li></li>.
Por último, fuera del bucle, indicamos el id del elemento dónde vamos a querer mostrar la lista de datos.
function creaListaObjetos() {
var acumulador = "";
for (var i = 0; i < arrayDeObjetos.length; i++) {
acumulador += "<li>" + arrayDeObjetos[i].id + " Nombre: " + arrayDeObjetos[i].nombre + "</li>";
}
document.getElementById("lista").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 !!
