Analysera en CSV-fil med JavaScript

Vad du ska skapa

Filformatet CSV (Comma Separated Values) är ett populärt sätt att utbyta data mellan applikationer.

I det här snabba tipset lär vi oss hur JavaScript kan hjälpa oss att visualisera data för en CSV-fil.

Skapa en CSV-fil

Till att börja med, låt oss skapa en enkel CSV-fil. För att göra detta kommer vi att dra nytta av Mockaroo, en online testdata generator. Här är vår fil:

Konvertera en CSV-fil till ett HTML-tabell

Nu när vi har genererat filen är vi redo att analysera den och bygga ett tillhörande HTML-bord.

Som ett första steg använder vi jQuery's ajax funktionen för att hämta data från den här filen:

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

Förutsatt att AJAX-förfrågan är framgångsrik, successFunction exekveras. Den här funktionen är ansvarig för att analysera den returnerade data och omvandla dem till en HTML-tabell:

 funktion successFunction (data) var allRows = data.split (/ \ r? \ n | \ r /); var tabell = ''; för (var singleRow = 0; singleRow < allRows.length; singleRow++)  if (singleRow === 0)  table += ''; tabell + = '';  else table + = '';  var rowCells = allRows [singleRow] .split (','); för (var rowCell = 0; rowCell < rowCells.length; rowCell++)  if (singleRow === 0)  table += '';  else table + = '';  om (singleRow === 0) table + = ''; tabell + = ''; tabell + = '';  else table + = '';  tabell + = ''; tabell + = '
'; tabell + = rowCells [rowCell]; tabell + = '
'; tabell + = rowCells [rowCell]; tabell + = '
'; . $ ( 'Kropp') bifoga (tabell);  

Så, tanken är att konvertera var och en av CSV-raderna till en tabellrad. Med det i åtanke, låt oss kortfattat förklara hur koden ovan fungerar:

• Först använder vi en regex för att dela AJAX-svaret och separera så CSV-raderna.
• Sedan viar det genom CSV-raderna och delar upp deras datafält.
• Slutligen slingrar vi igenom datafälten och skapar motsvarande tabellceller.

För att få en bättre förståelse av denna kod, överväga följande visualisering:

Vid denna tidpunkt är det viktigt att klargöra varför vi använde / \ R \ n |? \ R / regex för att dela upp CSV-raderna.

Som du förmodligen redan vet finns det olika representationer av en ny linje över operativsystem. På Windows-plattformar är exempelvis tecknen som representerar en ny linje \ R \ n. Med detta sagt, genom att använda regex ovan, kan vi matcha alla möjliga representationer.

Dessutom tillåter de flesta textredigerare oss att välja formatet för en newline. Ta till exempel Notepad ++. I den här redigeraren kan vi ange önskat format för ett dokument genom att navigera till den här sökvägen:

För att illustrera det, överväga vår fil. Beroende på det format vi väljer, så skulle det se ut så här:

Lägga till stilar i HTML-tabellen

Innan vi tittar på den resulterande tabellen, låt oss lägga till några grundläggande stilar till det:

 bord marginal: 0 auto; text-align: center; gränskollaps: kollapsa; gränsen: 1px solid # d4d4d4;  tr: nth-child (even) bakgrund: # d4d4d4;  th, td vaddering: 10px 30px;  th border-bottom: 1px solid # d4d4d4;  

Här är den genererade tabellen:

Slutsats

I den här korta artikeln gick vi igenom processen att konvertera en CSV-fil till en HTML-tabell. Naturligtvis kunde vi ha använt ett webbaserat verktyg för denna omvandling, men jag tror att det alltid är mer utmanande att uppnå detta genom att skriva en egen kod.