El formato de archivo CSV (Comma Separated Values) es una forma popular de intercambiar datos entre aplicaciones. En este consejo rápido, aprenderemos cómo JavaScript puede ayudarnos a visualizar los datos de un archivo CSV.
Creación de un archivo CSV
Para empezar, vamos a crear un archivo CSV simple. Para ello, aprovecharemos Mockaroo, un generador de datos de prueba en línea. Aquí está nuestro archivo:
Convertir un archivo CSV en una tabla HTML
Ahora que hemos generado el archivo, estamos listos para analizarlo y construir una tabla HTML asociada.
Como primer paso, utilizaremos la función ajax de jQuery para recuperar los datos de este archivo:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Suponiendo que la petición AJAX tenga éxito, se ejecuta la función successFunction. Esta función se encarga de analizar los datos devueltos y transformarlos en una tabla HTML:
La idea es convertir cada una de las filas del CSV en una fila de la tabla. Con esto en mente, vamos a explicar brevemente cómo funciona el código anterior:
- En primer lugar, utilizamos una regex para dividir la respuesta AJAX, y así separar las filas CSV.
- A continuación, iteramos a través de las filas CSV y dividimos sus campos de datos.
- Por último, hacemos un bucle a través de los campos de datos y creamos las celdas de la tabla correspondientes.
Además, para entender mejor este código, considere la siguiente visualización:
En este punto, es importante aclarar por qué utilizamos la regex /\r?\n|\r/ para dividir las filas del CSV.
Como probablemente ya sabe, hay diferentes representaciones de una nueva línea entre los sistemas operativos. Por ejemplo, en las plataformas Windows, los caracteres que representan una nueva línea son \r\n. Dicho esto, utilizando la regex anterior, somos capaces de hacer coincidir todas esas posibles representaciones.
Además, la mayoría de los editores de texto nos permiten elegir el formato de una nueva línea. Por ejemplo, el Bloc de notas++. En este editor, podemos especificar el formato deseado para un documento navegando a esta ruta:
Para ilustrarlo, consideremos nuestro archivo. Dependiendo del formato que elijamos, se vería así:
Añadir estilos a la tabla HTML
Antes de ver la tabla resultante, vamos a añadirle unos cuantos estilos básicos:
Aquí está la tabla generada:
Cómo analizar un archivo CSV con la biblioteca Papa Parse
En esta sección, veremos cómo se puede utilizar la biblioteca Papa Parse para analizar un archivo CSV en un abrir y cerrar de ojos. Papa Parse es un analizador CSV realmente potente que te proporciona un montón de opciones de configuración, y podrías utilizarlo también para archivos CSV realmente grandes.
La librería Papa Parse está disponible en npm, y si no quieres utilizar npm, puedes descargar el paquete npm oficial de Papa Parse desde unpkg en su lugar.
Cómo funciona
El siguiente ejemplo demuestra lo fácil que es analizar una cadena CSV.
var results = Papa.parse(data); // data is a CSV string
La variable results contiene el siguiente contenido.
Como puedes ver, Results.data contiene un array con todas las filas. Si hay algún error durante el análisis, estará en Results.errors. Por último, puede utilizar Results.meta para acceder a la meta información sobre la cadena CSV.
Por otro lado, si quieres analizar directamente un archivo CSV local, puedes pasar un objeto JavaScript File:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
Y también puedes pasar la URL a un archivo CSV remoto:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Aparte del análisis básico, Papa Parse proporciona un montón de otras características como:
- streaming de archivos grandes (para poder procesarlos línea a línea)
- reverse parsing (para emitir CSV desde un objeto JavaScript)
- integración con jQuery
- y mucho más
¡Te animo a explorar esta librería ya que es realmente potente y fácil de usar!
Conclusión
En este breve artículo, hemos pasado por el proceso de convertir un archivo CSV en una tabla HTML. Por supuesto, podríamos haber utilizado una herramienta basada en la web para esta conversión, pero creo que siempre es más desafiante lograr esto escribiendo tu propio código.