Analisi di un file CSV con JavaScript

Cosa starai creando

Il formato file CSV (Comma Separated Values) è un modo popolare di scambio di dati tra le applicazioni.

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

Creazione di un file CSV

Per cominciare, creiamo un semplice file CSV. Per fare questo, sfrutteremo Mockaroo, un generatore di dati di test online. Ecco il nostro file:

Conversione di un file CSV in una tabella HTML

Ora che abbiamo generato il file, siamo pronti per analizzarlo e creare una tabella HTML associata.

Come primo passo, utilizzeremo jQuery ajax funzione per recuperare i dati da questo file:

 $ .ajax (url: 'csv_data.csv', dataType: 'text',). done (successFunction); 

Supponendo che la richiesta AJAX abbia successo, il successFunction viene eseguito. Questa funzione è responsabile dell'analisi dei dati restituiti e della loro trasformazione in una tabella HTML:

 function successFunction (data) var allRows = data.split (/ \ r? \ n | \ r /); var table = ''; per (var singleRow = 0; singleRow < allRows.length; singleRow++)  if (singleRow === 0)  table += ''; tabella + = '';  else table + = '';  var rowCells = allRows [singleRow] .split (','); per (var rowCell = 0; rowCell < rowCells.length; rowCell++)  if (singleRow === 0)  table += '';  else table + = '';  if (singleRow === 0) table + = ''; tabella + = ''; tabella + = '';  else table + = '';  table + = ''; tabella + = '
'; table + = rowCells [rowCell]; tabella + = '
'; table + = rowCells [rowCell]; tabella + = '
'; . $ ( 'Body') accodare (tabella);  

Quindi, l'idea è di convertire ciascuna delle righe CSV in una riga della tabella. Con questo in mente, spieghiamo brevemente come funziona il codice sopra:

• Innanzitutto, usiamo un'espressione regolare per dividere la risposta AJAX e quindi separare le righe CSV.
• Quindi, iteriamo attraverso le righe CSV e dividiamo i loro campi di dati.
• Infine, passiamo in rassegna i campi di dati e creiamo le celle di tabella corrispondenti.

Inoltre, per ottenere una migliore comprensione di questo codice, prendere in considerazione la seguente visualizzazione:

A questo punto, è importante chiarire perché abbiamo usato il / \ R \ n |? \ R / regex per dividere le righe CSV.

Come probabilmente già sai, ci sono diverse rappresentazioni di una nuova riga tra i sistemi operativi. Ad esempio, su piattaforme Windows sono i caratteri che rappresentano una nuova riga \ R \ n. Detto questo, usando la regex di cui sopra, siamo in grado di abbinare tutte quelle possibili rappresentazioni.

Inoltre, la maggior parte degli editor di testo ci consente di scegliere il formato per una nuova riga. Prendi, ad esempio, Notepad ++. In questo editor, possiamo specificare il formato desiderato per un documento navigando su questo percorso:

Per illustrarlo, considera il nostro file. A seconda del formato che scegliamo, sembrerebbe questo:

Aggiunta di stili alla tabella HTML

Prima di esaminare la tabella risultante, aggiungiamo alcuni stili di base:

 table margin: 0 auto; allineamento del testo: centro; border-collapse: collapse; border: 1px solid # d4d4d4;  tr: nth-child (pari) background: # d4d4d4;  th, td padding: 10px 30px;  th border-bottom: 1px solid # d4d4d4;  

Ecco la tabella generata:

Conclusione

In questo breve articolo, abbiamo esaminato il processo di conversione di un file CSV in una tabella HTML. Ovviamente, avremmo potuto utilizzare uno strumento basato sul web per questa conversione, tuttavia penso che sia sempre più difficile ottenere questo risultato scrivendo il tuo codice.