JavaScript – Asociar información a elementos dinámicos con data-*
Uso de los atributos data en HTML y JavaScript
Los atributos data de HTML son atributos personalizados que ayudan a asociar información a un elemento HTML (incluso si es creado de manera dinámica) con JavaScript.
Estos atributos vienen de maravilla cuando tenemos elementos dinámicos y queremos acceder a ellos en el click de un botón o de ellos mismos.
Lo que haremos hoy es ver cómo asociar información de una variable de JavaScript a un elemento HTML para después recuperarla en el click del botón:
Demostración de click del botón al agregar información con los atributos data
Accede a la demostración aquí.
Cómo funcionan los atributos data
Estos atributos son para guardar información en elementos HTML. Si queremos definirlos en HTML se hace así:
<elemento data-id="1"/>
Solo ponemos data-* en donde el asterisco es cualquier dato.
También se puede con JavaScript. Para establecerlos hacemos:
elemento.dataset.id = 1;
Y para recuperarlos:
let id = elemento.dataset.id;
Restricciones de atributos data
Estos atributos solo pueden guardar cadenas, justo como lo hace localStorage.
Pero recordemos que cualquier cosa se puede serializar en una cadena usando JSON. Así que si queremos guardar datos complejos como un objeto o arreglo simplemente establecemos el dato usando JSON.stringify y después al recuperarlo usamos JSON.parse.
No hay límite de atributos. Es decir, podemos establecer muchos atributos data. Por ejemplo:
<img data-id="1" data-otro-valor="hola"/>
Lo mismo pasa con JavaScript.
Ejemplo de atributos data con datos dinámicos
Voy a mostrarte cómo lograr lo que se ve en la imagen del encabezado, es decir, ligar información a un botón y luego recuperarla en el click.
Recuerda que recomiendo ampliamente ver primero cómo dibujar una tabla dinámica.
La vista
La tabla HTML se ve así:
No definimos el cuerpo de la tabla porque ese será dibujado de manera dinámica.
Los productos
Voy a basarme en un ejemplo anterior en donde dibujamos una tabla dinámica a partir de un arreglo.
Ahora cada que agregamos una fila a la tabla, agregamos también un botón.
Tenemos el arreglo de productos:
Establecer datos
Lo vamos a recorrer y en cada paso del ciclo vamos a asignar el producto (codificado como JSON) al botón. Así:
Presta atención a la línea 5 pues en ella estamos accediendo al dataset. Lo demás es agregar elementos de manera dinámica para dibujar una tabla como vimos en el tutorial anterior.
También mira la línea 8 pues en ella escuchamos el click y llamamos a la función accionProducto cuya definición veremos más adelante.
No olvides que ese fragmento de código está dentro de un forEach por lo que se agrega el listener y el producto al botón por cada iteración o paso.
Acceder a los datos
En el click del botón vamos a llamar a la función llamada accionProducto. Ahí, a través de this, tenemos una referencia al elemento.
Por lo tanto solo accedemos a los datos, los decodificamos y a partir de ahí tenemos acceso a cada producto.
Poniendo todo junto
Entonces el script completo queda así:
La vista no se modificó en ningún momento.
Puedes probar la demostración aquí, no olvides abrir la consola del navegador con F12 en la mayoría de casos.
Nota: los estilos de la tabla fueron tomados de aquí.
Conclusión
Con este enfoque podemos ligar información a elementos, la cual podemos recuperar en otro lugar.
En este caso agregamos el objeto completo, aunque en la vida real recomiendo solo agregar el id o índice para hacer más ligeras las cosas.