Parsing di un File CSV con JavaScript

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

L'utilizzo del formato CSV (Comma Separated Value) è un modo diffuso per scambiare dati tra applicazioni.

In questo veloce tutorial, impareremo come JavaScript può aiutarci a visualizzare i dati di un file CSV.

Creare un File CSV

Per iniziare, creiamo un semplice file CSV. Per farlo, sfrutteremo Mockaroo, un generatore di dati di test online. Ecco il nostro file:

Convertire un File CSV in una Tabella HTML

Ora che abbiamo generato il file, siamo pronti per farne il parsing e per costruire una tabella HTML ad esso associata.

Prima cosa, useremo la funzione ajax di jQuery per recuperare i dati dal file:

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

Se la richiesta AJAX viene effettuata con successo, viene eseguita successFunction. Questa funzione è responsabile del parsing dei dati restituiti e della loro trasformazione in una tabella 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);
      }

L'idea è perciò quella di convertire ogni riga del CSV in una riga di tabella. Detto ciò, spieghiamo brevemente come funziona il codice qui sopra:

prima usiamo una regex per dividere la risposta AJAX e, quindi, per separare le righe del CSV;
in seguito, iteriamo le righe del CSV e separiamo i campi dei dati;
infine cicliamo i campi dei dati e creiamo le corrispondenti celle della tabella.

Per capire meglio questo codice, osserva l'immagine seguente:

A questo punto, è importante chiarire perché abbiamo usato l'espressione regolare /\r?\n|\r/ per dividere le righe del CSV.

Probabilmente già sai che esistono differenti modi di indicare un a capo nei diversi sistemi operativi. Ad esempio, nelle piattaforme Windows i caratteri usati per andare a capo sono \r\n. Detto ciò, usando la regex sopra, possiamo intercettare tutte le possibili rappresentazioni.

In aggiunta, molti text editor consentono di scegliere il formato per indicare la nuova riga. Prendi, ad esempio, Notepad++. In questo editor, possiamo specificare il formato preferito per un documento scegliendolo da menu:

Per capire meglio, considera il nostro file. A seconda del formato che scegliamo, si presenterà come illustrato di seguito:

Aggiungere Stili alla Tabella HTML

Prima di dare un'occhiata alla tabella risultante, aggiungiamo qualche stile di base:

	  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;
      }     

Ecco la tabella generata:

Conclusioni

In questo breve articolo, abbiamo visto il processo di conversione di un file CSV in una tabella HTML. Ovviamente, avremmo potuto usare un tool web per la conversione, anche se ritengo che sia sempre più stimolante ottenere lo stesso risultato scrivendo il proprio codice.