A menudo, cuando trabajamos con datos en aplicaciones web, necesitamos presentarlos de manera organizada y fácil de leer. Una forma común de hacerlo es mediante tablas HTML. En este artículo, aprenderemos cómo cargar y mostrar datos desde un archivo JSON en una tabla HTML utilizando JavaScript y se proporcionarán 3 códigos. Comenzando por un archivo JSON de ejemplo, seguido por un código HTML sencillo en donde se hará la llamada del último código en JavaScript.
JSON, que significa "JavaScript Object Notation" o Notación de Objetos de JavaScript en español, es un formato de intercambio de datos ligero. Se utiliza comúnmente para transmitir datos entre un servidor y un cliente web, así como para almacenar datos estructurados en archivos.
JSON se basa en dos estructuras de datos principales:
Objetos: Un objeto JSON es un conjunto no ordenado de pares clave-valor. Cada par clave-valor está separado por dos puntos (:), y los pares se separan por comas. Por ejemplo:
jsonCopy code{
"nombre": "Juan",
"edad": 30,
"ciudad": "Nueva York"
}Arreglos: Un arreglo JSON es una lista ordenada de valores, donde cada valor puede ser un objeto JSON, un número, una cadena, un booleano o incluso otro arreglo. Los elementos del arreglo se encierran entre corchetes ([ ]) y se separan por comas. Por ejemplo:
jsonCopy code[ "Manzana", "Banana", "Cereza" ]
En el código que proporcionaremos, el objeto org es un ejemplo de JSON. Contiene una propiedad llamada "data" que es un arreglo de objetos. Cada objeto representa una fila de datos y contiene propiedades clave-valor que describen los detalles de esa fila, como "nombrePuesto", "tipoContrato" y más.
Archivo JSON
org={
"data": [
{
"link": "https://www.ejemplo.com/link1",
"tipoContrato": "Tiempo completo",
"id": 1,
"nombrePuesto": "Desarrollador Front-end",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad1",
"nombre": "Departamento de Desarrollo Front-end"
}
]
},
{
"link": "https://www.ejemplo.com/link2",
"tipoContrato": "Medio tiempo",
"id": 2,
"nombrePuesto": "Diseñador UX/UI",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad2",
"nombre": "Equipo de Diseño UX/UI"
}
]
},
{
"link": "https://www.ejemplo.com/link3",
"tipoContrato": "Tiempo completo",
"id": 3,
"nombrePuesto": "Analista de Datos",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad3",
"nombre": "Equipo de Análisis de Datos"
}
]
},
{
"link": "https://www.ejemplo.com/link4",
"tipoContrato": "Medio tiempo",
"id": 4,
"nombrePuesto": "Ingeniero de Software",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad4",
"nombre": "Equipo de Desarrollo de Software"
}
]
},
{
"link": "https://www.ejemplo.com/link5",
"tipoContrato": "Tiempo completo",
"id": 5,
"nombrePuesto": "Especialista en Marketing Digital",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad5",
"nombre": "Equipo de Marketing Digital"
}
]
},
{
"link": "https://www.ejemplo.com/link6",
"tipoContrato": "Medio tiempo",
"id": 6,
"nombrePuesto": "Analista de Seguridad Informática",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad6",
"nombre": "Equipo de Seguridad Informática"
}
]
},
{
"link": "https://www.ejemplo.com/link7",
"tipoContrato": "Tiempo completo",
"id": 7,
"nombrePuesto": "Gerente de Proyecto",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad7",
"nombre": "Equipo de Gestión de Proyectos"
}
]
},
{
"link": "https://www.ejemplo.com/link8",
"tipoContrato": "Medio tiempo",
"id": 8,
"nombrePuesto": "Analista de Soporte Técnico",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad8",
"nombre": "Equipo de Soporte Técnico"
}
]
},
{
"link": "https://www.ejemplo.com/link9",
"tipoContrato": "Tiempo completo",
"id": 9,
"nombrePuesto": "Diseñador Gráfico",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad9",
"nombre": "Equipo de Diseño Gráfico"
}
]
},
{
"link": "https://www.ejemplo.com/link10",
"tipoContrato": "Medio tiempo",
"id": 10,
"nombrePuesto": "Especialista en Recursos Humanos",
"departamento": [
{
"link": "https://www.ejemplo.com/unidad10",
"nombre": "Equipo de Recursos Humanos"
}
]
}
]
}
- org: Es el objeto principal que contiene nuestros datos. En este ejemplo, contiene una propiedad llamada "data" que es un arreglo de objetos.
- Cada objeto dentro de "data" representa una fila de la tabla. Contiene propiedades como "tipoContrato", "id", "nombrePuesto" y "departamento", que son las columnas que se mostrarán en la tabla.
- Dentro del objeto "departamento", también hay un arreglo de objetos que representa un subconjunto de datos relacionados.
Código HTML
Aquí se añadirá una parte de una página html que contiene a la tabla que se utilizará para la prueba.
<div class="container-fluid col-lg-11 content">
<h2 style="text-align:center">Tabla de Prueba</h2><br>
<table id="sortabletable" class="table table-sm table-bordered table-cell-resizable table-index-set-col-width-4 table-custom-style table-scrollX" width="100%" cellspacing="0">
</table>
</div>
<script type="text/javascript" src="../standard/Viewjs/527d65d56402d2cf.js"></script>
<script src="data/527d65d56402d2cf.json" defer onload="load()"></script>
- El contenido de la tabla se almacenará en un div con la clase "container-fluid" que actúa como contenedor.
- Se crea una tabla con id "sortabletable" para mostrar los datos. Esta tabla tiene varias clases CSS para aplicar estilos específicos.
- Se cargan dos archivos, el archivo JSON correspondiente y un archivo JavaScript. Estos son externos y se llaman utilizando las etiquetas <script>. El segundo carga el atributo "defer" y llama a la función "load()" cuando se carga el archivo. Es importante identificar la ruta correcta donde estarán almacenados estos archivos para que puedan ser ejecutados.
Código de JavaScript
Este es el código JavaScript que se utiliza para cargar los datos desde el archivo JSON y construir la tabla de forma que se van insertando etiquetas HTML, este sólo es un método, puesto que no es obligatorio insertar las etiquetas de esta manera.
function load() {
var tablaHTML = "<thead><tr><th width=\"50\">ID</th><th width=\"400\">Puesto</th><th width=\"400\">Departamento</th><th width=\"100\">Contrato</th></tr></thead><tbody>";
for (let i = 0; i < org.data.length; i++) {
tablaHTML += "<tr><td>" + org.data[i].id + "</td>";
tablaHTML += "<td><a href=" + org.data[i].link + ">" + org.data[i].nombrePuesto + "</a></td>";
tablaHTML += "<td>";
for (let j = 0; j < org.data[i].departamento.length; j++) {
tablaHTML += "<a href=" + org.data[i].departamento[j].link + ">" + org.data[i].departamento[j].nombre + "</a><br>";
}
tablaHTML += "</td>";
tablaHTML += "<td>" + org.data[i].tipoContrato + "</td>";
tablaHTML += "</tr>";
}
tablaHTML += "</tbody>";
var contenedorTabla = document.getElementById("sortabletable");
contenedorTabla.innerHTML = tablaHTML;
}
function load(): Esto define una función llamada load que se ejecutará cuando se cargue el archivo JSON y se active el evento onload, el mismo especificado en el código HTML.
var tablaHTML: Aquí se inicializa una variable llamada tablaHTML con el contenido inicial de la tabla, que incluye las etiquetas thead y tbody. Es en esta variable en la que se irá almacenando una cadena completa de código HTML que se insertará en la tabla.
El bucle for recorre los datos en el objeto JSON org.data y construye las filas de la tabla utilizando los datos de cada elemento del JSON. Cada que se encuentre un dato en el archivo JSON, se almacenará en la cadena tablaHTML. Hay que notar que este bucle contiene un nuevo bucle for, es decir, son bucles anidados y esto es una manera de recorrer todo el archivo json, tampoco es la única manera de hacerlo, pero en este ejemplo se utiliza así. El motivo de esto es debido a que el campo de "departamento" en el archivo JSON, contiene una nueva estrucutra de datos dentro de si, y para poder acceder a ellos, se utiliza un segundo bucle for que recorrerá su estrucutra interna y para ello se utiliza la línea de código que contiene "org.data[i].departamento". De esta manera, cuando se encuentre un elemento "departamento" en el índice de "org.data[i]", se accederá y ahora podemos recorrer "departamento[j]" con otro índice para acceder a los datos.
var contenedorTabla: Esto selecciona el elemento de la tabla por su ID ("sortabletable") y lo almacena en la variable contenedorTabla. Esta variable será necesaria para identificar en qué sección del código de HTML será necesario insertar la cadena resultante de tablaHTML.
contenedorTabla.innerHTML: Aquí se inserta el contenido generado en la tabla HTML, lo que llena la tabla con los datos del JSON en el orden que fueron estructuradas por el bucle for. Es muy importante que se verifique la manera en la que se está recorriendo el archivo JSON, puesto que si se intenta acceder a elementos que no existan o que no se encuentren en el nivel adecuado, el código entero fallará y no habrá una salida visual.
Finalmente, accedemos a la página correspondiente de acuerdo a la ruta que hayamos seleccionado para esta.
Y visualizamos el resultado de los datos contenidos en el JSON:
En este blog, hemos demostrado cómo utilizar HTML, JavaScript y un archivo JSON para crear y mostrar una tabla de datos en una página web. Esta técnica permite a los desarrolladores presentar información de manera dinámica y atractiva, lo que mejora la experiencia del usuario al interactuar con datos en línea. La estructura en JSON puede ser extremadamente útil para organizar tantos datos se requieran y para manipular estos de forma precisa, siempre y cuando la estructura esté bien planeada y no sea complicado de acceder a todos los datos guardados en este.