CSV-filformatet (Comma Separated Values) er en populær måde at udveksle data mellem programmer på. I dette hurtige tip lærer vi, hvordan JavaScript kan hjælpe os med at visualisere dataene i en CSV-fil.
Skabelse af en CSV-fil
Lad os til at begynde med oprette en simpel CSV-fil. For at gøre dette vil vi drage fordel af Mockaroo, en online testdatagenerator. Her er vores fil:
Konvertering af en CSV-fil til en HTML-tabel
Nu da vi har genereret filen, er vi klar til at analysere den og opbygge en tilhørende HTML-tabel.
Som et første skridt bruger vi jQuerys ajax-funktion til at hente dataene fra denne fil:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Antages det, at AJAX-forespørgslen er vellykket, udføres successFunction. Denne funktion er ansvarlig for at analysere de returnerede data og omdanne dem til en HTML-tabel:
Det er meningen, at hver af CSV-rækkerne skal konverteres til en tabelrække. Lad os med det i tankerne kort forklare, hvordan ovenstående kode fungerer:
- Først bruger vi en regex til at opdele AJAX-svaret og dermed adskille CSV-rækkerne.
- Dernæst itererer vi gennem CSV-rækkerne og opdeler deres datafelter.
- Sluttelig gennemløber vi datafelterne og opretter de tilsvarende tabelceller.
For at få en bedre forståelse af denne kode kan du desuden overveje følgende visualisering:
På dette tidspunkt er det vigtigt at præcisere, hvorfor vi brugte /\r?\n|\r/-regex til at opdele CSV-rækkerne.
Som du sikkert allerede ved, er der forskellige repræsentationer af en newline på tværs af styresystemer. På Windows-platforme er de tegn, der repræsenterer en newline, f.eks. \r\n. Når det er sagt, er vi ved hjælp af ovenstående regex i stand til at matche alle disse mulige repræsentationer.
Dertil kommer, at de fleste tekstredigeringsprogrammer giver os mulighed for at vælge formatet for en newline. Tag f.eks. Notepad++. I denne editor kan vi angive det ønskede format for et dokument ved at navigere til denne sti:
For at illustrere det kan vi se på vores fil. Afhængigt af det format, vi vælger, ville den se således ud:
Tilføjelse af stilarter til HTML-tabellen
Hvor vi ser på den resulterende tabel, skal vi tilføje et par grundlæggende stilarter til den:
Her er den genererede tabel:
Sådan analyserer du en CSV-fil med Papa Parse-biblioteket
I dette afsnit vil vi se, hvordan du kan bruge Papa Parse-biblioteket til at analysere en CSV-fil i løbet af et øjeblik! Papa Parse er en virkelig kraftfuld CSV-parser, som giver dig en masse konfigurationsmuligheder, og du kan også bruge den til virkelig store CSV-filer.
Papa Parse-biblioteket er tilgængeligt på npm, og hvis du ikke ønsker at bruge npm, kan du i stedet hente den officielle Papa Parse npm-pakke fra unpkg.
Sådan fungerer det
Det følgende eksempel viser, hvor nemt det er at parse en CSV-streng.
var results = Papa.parse(data); // data is a CSV string
Variablen results indeholder følgende indhold.
Som du kan se, indeholder Results.data et array med alle rækker. Hvis der er nogen fejl under parsningen, vil de være i Results.errors. Endelig kan du bruge Results.meta til at få adgang til metainformationer om CSV-strengen.
På den anden side, hvis du ønsker at analysere en lokal CSV-fil direkte, kan du videregive et JavaScript File-objekt:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
Og du kan også videregive URL’en til en fjern-CSV-fil:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Afhængigt af den grundlæggende parsing tilbyder Papa Parse en masse andre funktioner som f.eks:
- streaming af store filer (så du kan behandle dem linje for linje)
- omvendt parsing (for at udstede CSV fra et JavaScript-objekt)
- jQuery-integration
- og meget mere
Jeg opfordrer dig til at udforske dette bibliotek, da det er virkelig kraftfuldt og nemt at bruge!
Konklusion
I denne korte artikel gennemgik vi processen med at konvertere en CSV-fil til en HTML-tabelle. Vi kunne selvfølgelig have brugt et webbaseret værktøj til denne konvertering, men jeg synes, at det altid er mere udfordrende at opnå dette ved at skrive sin egen kode.