Il formato CSV (Comma Separated Values) è un modo popolare di scambiare dati tra le applicazioni. In questo rapido 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 farlo, approfitteremo di 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 analizzarlo e costruire una tabella HTML associata.
Come primo passo, useremo la funzione ajax di jQuery per recuperare i dati da questo file:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Assumendo che la richiesta AJAX abbia successo, viene eseguita la successFunction. Questa funzione è responsabile dell’analisi dei dati restituiti e della loro trasformazione in una tabella HTML:
L’idea è di convertire ogni riga del CSV in una riga di tabella. Con questo in mente, spieghiamo brevemente come funziona il codice di cui sopra:
- Prima, usiamo una regex per dividere la risposta AJAX, e quindi separare le righe CSV.
- Poi, iteriamo attraverso le righe CSV e dividiamo i loro campi di dati.
- Infine, facciamo un ciclo attraverso i campi di dati e creiamo le corrispondenti celle della tabella.
Inoltre, per capire meglio questo codice, considerate la seguente visualizzazione:
A questo punto, è importante chiarire perché abbiamo usato la regex /\r?\n|\r/ per dividere le righe CSV.
Come probabilmente già sapete, ci sono diverse rappresentazioni di un newline nei sistemi operativi. Per esempio, sulle piattaforme Windows, i caratteri che rappresentano un newline sono \r\n. Detto questo, usando la regex di cui sopra, siamo in grado di abbinare tutte queste possibili rappresentazioni.
Inoltre, la maggior parte degli editor di testo ci permette di scegliere il formato per un newline. Prendiamo, per esempio, Notepad++. In questo editor, possiamo specificare il formato desiderato per un documento navigando in questo percorso:
Per illustrarlo, considerate il nostro file. A seconda del formato che scegliamo, potrebbe apparire così:
Aggiungimento di stili alla tabella HTML
Prima di guardare la tabella risultante, aggiungiamo alcuni stili di base:
Ecco la tabella generata:
Come analizzare un file CSV con la libreria Papa Parse
In questa sezione, vedremo come usare la libreria Papa Parse per analizzare un file CSV in un batter d’occhio! Papa Parse è un parser CSV davvero potente che ti fornisce un sacco di opzioni di configurazione, e potresti usarlo anche per file CSV molto grandi.
La libreria Papa Parse è disponibile su npm, e se non vuoi usare npm, puoi invece scaricare il pacchetto ufficiale Papa Parse npm da unpkg.
Come funziona
L’esempio seguente dimostra quanto sia facile analizzare una stringa CSV.
var results = Papa.parse(data); // data is a CSV string
La variabile results contiene il seguente contenuto.
Come puoi vedere, Results.data contiene un array di tutte le righe. Se ci sono errori durante il parsing, saranno in Results.errors. Infine, puoi usare Results.meta per accedere alle meta informazioni sulla stringa CSV.
D’altra parte, se volete analizzare direttamente un file CSV locale, potete passare un oggetto JavaScript File:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
E potete anche passare l’URL di un file CSV remoto:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Oltre all’analisi di base, Papa Parse fornisce molte altre caratteristiche come:
- streaming di file di grandi dimensioni (in modo da poterli processare riga per riga)
- reverse parsing (per emettere CSV da un oggetto JavaScript)
- integrazione con jQuery
- e altro
Vi incoraggio ad esplorare questa libreria poiché è davvero potente e facile da usare!
Conclusione
In questo breve articolo, siamo andati attraverso il processo di conversione di un file CSV in una tabella HTML. Naturalmente, avremmo potuto usare uno strumento basato sul web per questa conversione, ma penso che sia sempre più impegnativo ottenere questo risultato scrivendo il proprio codice.