Pintar un array de objetos con el DOM

Pintar un array de objetos con el DOM es una acción que necesitaremos hacer a menudo a la hora de desarrollar para la web. Esta acción nos permite pintar una serie de objetos de un array en el navegador de manera automática, sin tener que pintar cada uno manualmente. En este post, te enseñaremos cómo pintar un array de objetos con el DOM usando un bucle for of.

Antes de pintar un array de objetos con el DOM

En nuestro post sobre crear un listado de elementos en JavaScript frontend te hemos enseñado cómo pintar un nuevo objeto en el DOM usando un string template y los métodos document.createElement, innerHTML y appendChild. Para ello, hemos simulado un tweet usando un objeto literal. Luego, hemos creado una plantilla de tweet en un string que nos permite definir qué propiedades de ese objeto pertenecen a qué etiqueta HTML. A continuación, te enseñaremos cómo usar y multiplicar este template para pintar un array de objetos con el DOM.

¿Cómo pintar un array de objetos con el DOM?

Lo primero que debemos hacer para pintar un array de objetos con el DOM es pasar nuestro objeto a un array. Para ello, añadimos los símbolos [ ] alrededor de nuestro objeto actual. Luego, podemos añadir más objetos literales como elementos de este nuevo array. Es decir, lo que antes era:

const tweet = {
handler: 'user01',
content: 'Algo que publico en twitter',
created_at: '2022-01-31'
};

Se convertirá en lo siguiente:

const tweets = [{
handler: 'user01',
content: 'Algo que publico en twitter',
created_at: '2022-01-31'
},
{
handler: 'user02',
content: 'Contenido del tweet del usuario 2',
created_at: '2022-01-30'
},
{
handler: 'user03',
content: 'Tweet del usuario 3',
created_at: '2022-01-39'
},]

Algunos detalles que puedes notar es que hemos cambiado el nombre de variable tweet a tweets. Además, hemos separado los objetos literales del array por comas y les hemos dado datos diferentes a cada uno.

Ahora, hemos pasado de pintar un solo tweet a pintar un número mayor. Aunque en nuestro caso este número es tres, realmente el valor de elementos del array no importa. Lo que si podemos saber con esta información es que nos hace falta iterar alguna sección de código para repetir acciones y pintar un array de objetos con el DOM en vez de un solo objeto.

Hagamos una revisión por nuestro código para determinar qué cambiar. El contenedor donde se pintan los tweets, declarado con la selección de main, puede mantenerse igual.

const tweetListElement = document.querySelector ('.tweet-list);

Ahora, la parte de generar el HTML del tweet, que es una plantilla que podremos usar para todos los tweets, sí debe cambiar. El motivo de esto es que necesitamos que la plantilla se aplique para cada tweet. Actualmente, tenemos las siguientes líneas de código:

const currentTime = new Date (tweets.created_at).toISOString();
const tweetTemplate =
<h1>${tweets.handler}</h1>
<p>${tweets.content}</p>
<p>&{currentTime</p>
;

Ahora, deberemos aplicar un bucle for para que esta acción se itere en cada tweet del array:

for (const tweet of tweets) {
const currentTime = new Date (tweet.created_at).toISOString();
const tweetTemplate = 
<h1>${tweet.handler}</h1>
<p>${tweet.content}</p>
<p>&{currentTime</p>
;
}

El siguiente paso es pintar cada tweet de este for en pantalla, lo cual nos permitirá pintar un array de objetos con el DOM. Para ello, deberemos crear nodos HTML. ¿Cuántos? Pues tantos nodos como tweets vayamos a pintar. Por ello, pasaremos las líneas de código que nos permitían pintar nuestro único tweet dentro del bucle for. Además, incluiremos la línea de código que ubicaba este elemento en el DOM con el método appendChild:

for (const tweet of tweets) {
const currentTime = new Date (tweet.created_at).toISOString();
const tweetTemplate = 
<h1>${tweet.handler}</h1>
<p>${tweet.content}</p>
<p>&{currentTime</p>
;
const tweetArticleElement = document.createElement ('article');
tweetArticleElement.innerHTML = tweetTemplate;
tweetListElement.appendChild (tweetArticleElement);
}

Con las líneas de código anteriores, hemos definido que, por cada uno de los tweets del array, se genera el HTML a pintar, se crea un article y a dicho article le agregamos el tweetTemplate como contenido HTML. Además, hemos ubicado este elemento como hijo de tweetListElement, definido anteriormente.

Ten presente que el bucle que estamos usando es un for of, no un simple for. En los bucles for simples debemos tener una variable que hace de contador, una condición de parada de iteración y un incremento. En los bucles for of no necesitamos definir una condición de parada de la iteración, pues este bucle solo iterará según el número de elementos que estén en el array. Es decir, es como si tuviéramos el condicional index < tweets.length. En nuestro caso, la sentencia for of dará tres vueltas porque el array tiene tres elementos.

Ahora que sabes cómo pintar un array de objetos con el DOM, ¡te invitamos a pintar este elemento en tus propios proyectos! Para ello, el siguiente paso es aprender a desarrollar proyectos en JavaScript tanto para el backend como el frontend en nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva con el que dominarás JavaScript, HTML, CSS y mucho más. ¿A qué esperas para dar el paso que te convertirá en desarrollador web? ¡Matricúlate ya!