Un listado de objetos es una página común a la hora de crear cualquier aplicación web, sea una lista de artículos, tweets o imágenes. Para crear esta página podemos usar muchos lenguajes de programación. En este post, te enseñaremos cómo crear un listado de objetos en JavaScript frontend.
¿Cómo crear un listado de objetos en JavaScript frontend?
Lo primero que debemos hacer para crear un listado de objetos en JavaScript frontend es crear un nuevo archivo HTML. Dentro de este archivo crearemos una estructura básica para dar inicio a nuestro listado. Si esta es la primera página de tu aplicación, puedes crear este contenido dentro de index.html con las siguientes líneas de código:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″/>
<meta http-equiv=»X-UA-Compatible» content=»IE-edge»/>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>
<title> Tweet List </title>
</head>
<body>
<main>
</main>
</body>
</html>
Ahora, dentro de esta estructura, crearemos un elemento section (dentro de main) en donde ubicaremos nuestro listado. Para ejemplificar este proceso, crearemos un listado de tweets. Le daremos un nombre de clase correspondiente a este section.
<section class=»tweet-list»></section>
¿Cómo empezamos a crear un listado de objetos en JavaScript frontend una vez tenemos este elemento section? En nuestro caso, primero necesitamos los tweets que vamos a pintar. Luego, usando JavaScript, deberemos acceder al section que hemos creado para insertarlos dentro.
Para este ejemplo, crearemos una serie de tweets manualmente. Esto lo haremos dentro de un archivo index.js. Allí crearemos una plantilla de tweet declarando un objeto literal como el que ves a continuación:
const tweet = {
handler: ‘user01’,
content: ‘Algo que publico en Twitter.’,
created_at: ‘2022-01-31’,
}
Con las líneas anteriores hemos creado un tweet que queremos pintar en pantalla. Sin embargo, no está en nuestro HTML, lo cual quiere decir que no será procesado por nuestro navegador. Para cambiar esto, deberemos crear un contenedor donde pintar el tweet creado, generar el HTML del tweet y luego incluirlo en el DOM.
Ya hemos creado el contenedor donde pintar los tweets con nuestro elemento section. Ahora, debemos acceder a este desde nuestro JavaScript. Para ello, podemos usar los comandos que hemos aprendido en nuestro post sobre seleccionar nodos del DOM. A continuación, te mostramos cómo seleccionamos nuestro section usando su nombre de clase:
const tweetListElement = document.querySelector (‘tweet-list’);
El siguiente paso para crear un listado de objetos en JavaScript frontend es generar el HTML del tweet. Es decir, dividir las propiedades que le hemos dado en distintos segmentos contenidos en etiquetas HTML. Esto nos permitirá definir la estructura del tweet en pantalla. A continuación, verás cómo lo hemos hecho con un template string o plantilla literal, un elemento que nos permite interpolar valores en un string usando las comillas hacia atrás o backtick(`).
cont currentTime = new Date (tweet.created-at)
const tweetTemplate = `
<h1>${tweet.handler}<h1>
<p>${tweet.content}</p>
<p>${currentTime}</p>
`
Con las líneas de código anteriores, hemos creado un string con valores interpolados (introducidos con el símbolo ${}). Este template string se convertirá en el HTML de nuestro tweet.
Ahora, el último paso para crear un listado de objetos en JavaScript frontend es incluir nuestro tweetTemplate dentro del DOM. Para esto, primero deberemos introducir algo dentro del elemento, dado que, por ahora, es tan solo un string. Para hacerlo, usaremos el método innerHTML.
¿Por qué no usamos el método appendChild del DOM? Pues porque este recibe un nodo, no un string. Por ello, antes de usar appendChild para ubicar nuestro tweetTemplate, debemos convertirlo en un nodo. A continuación, lo hemos hecho creando un nuevo article con document.create.Element, un comando que nos permite crear elementos en el DOM.
const tweetArticleElement = document.createElement (‘article’)
tweetArticleElement.innerHTML = tweetTemplate;
Ahora, usamos appendChild para hacer que tweetArticleElement cuelgue de tweetListElement, es decir, de nuestro section HTML.
tweetListElement.appendChild (tweetArticleElement)
Para que todas las líneas de código que hemos escrito anteriormente funcionen, debemos incluir la etiqueta script dentro de nuestro index.html. Esta etiqueta es fundamental para conectar nuestro archivo JavaScript con el archivo HTML.
<script src= «./index.js»></script>
Si tienes dudas sobre dónde colocar esta línea en tu HTML, te invitamos a leer nuestro post sobre dónde ubicar script en tu código.
Ahora que sabes cómo crear un listado de objetos en JavaScript frontend, ¡es el momento ideal para usar este conocimiento en tus propios proyectos! Para seguir aprendiendo sobre el desarrollo de todo tipo de proyectos para la web, te invitamos a participar en nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra en el que aprenderás a desarrollar con diversos lenguajes de programación y herramientas de forma tanto teórica como práctica, siempre con la guía de un experto. ¡No te lo pierdas y pide información ahora!
