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:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/03/image-3.png?resize=538%2C689&ssl=1)
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.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/03/image-1.png?resize=900%2C560&ssl=1)
Para terminar, ejecutamos el index.html en el navegador para descubrir el resultado.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/03/image-2.png?resize=393%2C211&ssl=1)
Espero que les sirva de ayuda !!
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/04/linkedin.png?resize=100%2C100&ssl=1)