Parsarea unui fișier CSV cu JavaScript

Formatul de fișier CSV (Comma Separated Values) este un mod popular de a face schimb de date între aplicații. În acest sfat rapid, vom învăța cum ne poate ajuta JavaScript să vizualizăm datele dintr-un fișier CSV.

Crearea unui fișier CSV

Pentru început, să creăm un fișier CSV simplu. Pentru a face acest lucru, vom profita de Mockaroo, un generator online de date de test. Iată fișierul nostru:

Conversia unui fișier CSV într-un tabel HTML

Acum că am generat fișierul, suntem gata să îl analizăm și să construim un tabel HTML asociat.

Ca un prim pas, vom folosi funcția ajax de la jQuery pentru a prelua datele din acest fișier:

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

În cazul în care cererea AJAX are succes, se execută successFunction. Această funcție este responsabilă de analizarea datelor returnate și de transformarea lor într-un tabel HTML:

Ideea este de a converti fiecare dintre rândurile CSV într-un rând de tabel. Ținând cont de acest lucru, să explicăm pe scurt cum funcționează codul de mai sus:

• În primul rând, folosim un regex pentru a diviza răspunsul AJAX și, astfel, pentru a separa rândurile CSV.
• Apoi, parcurgem rândurile CSV și divizăm câmpurile de date ale acestora.
• În cele din urmă, parcurgem în buclă câmpurile de date și creăm celulele de tabel corespunzătoare.

În plus, pentru a înțelege mai bine acest cod, luați în considerare următoarea vizualizare:

În acest moment, este important să clarificăm de ce am folosit regex-ul /\r?\n|\r/ pentru a diviza rândurile CSV.

După cum probabil știți deja, există diferite reprezentări ale unei linii noi în sistemele de operare. De exemplu, pe platformele Windows, caracterele care reprezintă o linie nouă sunt \r\n. Acestea fiind spuse, prin utilizarea regex-ului de mai sus, suntem capabili să potrivim toate aceste reprezentări posibile.

În plus, majoritatea editorilor de text ne permit să alegem formatul pentru o linie nouă. Să luăm, de exemplu, Notepad++. În acest editor, putem specifica formatul dorit pentru un document navigând pe această cale:

Pentru a ilustra acest lucru, luați în considerare fișierul nostru. În funcție de formatul pe care îl alegem, acesta ar arăta astfel:

Adaugarea de stiluri la tabelul HTML

Înainte de a ne uita la tabelul rezultat, haideți să îi adăugăm câteva stiluri de bază:

Iată tabelul generat:

Cum să analizăm un fișier CSV cu biblioteca Papa Parse

În această secțiune, vom vedea cum puteți folosi biblioteca Papa Parse pentru a analiza un fișier CSV într-o clipită! Papa Parse este un parser CSV foarte puternic care vă oferă o mulțime de opțiuni de configurare și îl puteți folosi și pentru fișiere CSV foarte mari.

Librăria Papa Parse este disponibilă pe npm, iar dacă nu doriți să folosiți npm, puteți descărca în schimb pachetul oficial Papa Parse npm de pe unpkg.

Cum funcționează

Exemplul următor demonstrează cât de ușor este să analizați un șir CSV.

var results = Papa.parse(data); // data is a CSV string

Variabila results deține următorul conținut.

După cum puteți vedea, Results.data deține un array cu toate rândurile. În cazul în care există erori în timpul analizei, acestea se vor afla în Results.errors. În cele din urmă, puteți utiliza Results.meta pentru a accesa informații meta despre șirul CSV.

Pe de altă parte, dacă doriți să analizați direct un fișier CSV local, puteți trece un obiect JavaScript File:

Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});

Și puteți, de asemenea, să treceți URL-ul unui fișier CSV la distanță:

Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});

În afară de analiza de bază, Papa Parse oferă o mulțime de alte caracteristici, cum ar fi:

• streaming de fișiere mari (astfel încât să le puteți procesa linie cu linie)
• reverse parsing (pentru a emite CSV dintr-un obiect JavaScript)
• integrarejQuery
• și multe altele

Vă încurajez să explorați această bibliotecă, deoarece este foarte puternică și ușor de utilizat!

Concluzie

În acest scurt articol, am parcurs procesul de conversie a unui fișier CSV într-un tabel HTML. Desigur, am fi putut folosi un instrument bazat pe web pentru această conversie, dar cred că este întotdeauna mai provocator să realizăm acest lucru scriind propriul cod.

.