Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Parsing di un File CSV con JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Luca Menozzi (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:

Initial-CSV-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:

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:

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:

CSV-Representation

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:

Notepad++-EOL

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

CSV-EOL

Aggiungere Stili alla Tabella HTML

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

Ecco la tabella generata:

Generated-Table

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.