Analizando ficheros CSV con Javascript

Spanish (Español) translation by Rolando Gonzalez (you can also view the original English article)

Final product image — What You'll Be Creating

El formato de archivo CSV (Comma Separated Values) (Valores Separados por Coma) es una forma popular de intercambio de datos entre aplicaciones.

En este rápido consejo, aprenderemos como JavaScript puede ayudarnos a visualizar los datos de un archivo CSV.

Creando un archivo CSV

Para comenzar, vamos a crear un archivo CSV simple. Para ello, tomaremos ventaja de Mockaroo, un generador de prueba de datos en línea. Este es nuestro archivo:

Convirtiendo un archivo CSV en una tabla HTML

Ahora que hemos generado el fichero, estamos listos para analizarlo y construir una tabla HTML asociada a él.

Como primer paso, usaremos la función ajax de jQuery para obtener los datos del archivo:

1	$.ajax({
2	url: 'csv_data.csv',
3	dataType: 'text',
4	}).done(successFunction);

Suponiendo que la petición AJAX es exitosa, se ejecuta successFunction. Esta función es responsable de analizar los datos devueltos y transformarlos en una tabla HTML:

	  function successFunction(data) {
        var allRows = data.split(/\r?\n|\r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
          if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
          } else {
            table += '<tr>';
          }
          var rowCells = allRows[singleRow].split(',');
          for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
              table += '<th>';
              table += rowCells[rowCell];
              table += '</th>';
            } else {
              table += '<td>';
              table += rowCells[rowCell];
              table += '</td>';
            }
          }
          if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
          } else {
            table += '</tr>';
          }
        } 
        table += '</tbody>';
        table += '</table>';
        $('body').append(table);
      }

Bueno, la idea es convertir cada una de las filas del archivo CSV en una fila de la tabla. Teniendo esto en cuenta, vamos a explicar brevemente cómo funciona el código anterior:

Primero, utilizamos una expresión regular para dividir la respuesta de AJAX y así separar las líneas CSV.
Luego, hacemos una iteración entre las filas del archivo CSV y dividimos sus campos de datos.
Finalmente, recorreremos los campos de datos y creamos las celdas correspondientes de la tabla.

Aún más, para tener una mejor idea de este código, considere la siguiente visualización:

En este punto, es importante aclarar por qué usamos regex /\r?\n|\r/ para dividir las filas del archivo CSV.

Como probablemente ya sabes, hay diversas formas de representar una nueva línea en los sistemas operativos. Por ejemplo, en las plataformas Windows los caracteres que representan un salto de línea son \r\n. Dicho esto, mediante el uso de la expresión regular anterior, seremos capaces expresar todas las representaciones posibles.

Además, la mayoría de editores de texto nos permiten elegir el formato de una nueva línea. Tomemos, por ejemplo, Notepad ++. En este editor podemos especificar el formato deseado para un documento en:

Para ilustrarlo, considere nuestro archivo. Dependiendo del formato que elegimos, luciria asi:

Agregando estilos a la tabla HTML

Antes nos fijamos en el resultado de la tabla, vamos a añadirle unos estilos básicos:

	  table {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #d4d4d4;
      }
    
      tr:nth-child(even) {
        background: #d4d4d4;
      }
    
      th, td {
        padding: 10px 30px;
      }
    
      th {
        border-bottom: 1px solid #d4d4d4;
      }     

Esta es la tabla generada:

Conclusión

En este corto artículo,fuimos a traves del proceso de convertir un archivo CSV en una tabla HTML. Por supuesto, podríamos haber utilizado una herramienta web para esta conversión, sin embargo, creo que siempre es un reto lograrlo escribinedo tu propio código.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!