Filformatet CSV (Comma Separated Values) är ett populärt sätt att utbyta data mellan program. I det här snabbtipset lär vi oss hur JavaScript kan hjälpa oss att visualisera data i en CSV-fil.
Skapa en CSV-fil
För att börja ska vi skapa en enkel CSV-fil. För att göra detta drar vi nytta av Mockaroo, en testdatagenerator online. Här är vår fil:
Konvertering av en CSV-fil till en HTML-tabell
När vi nu har genererat filen är vi redo att analysera den och bygga en tillhörande HTML-tabell.
Som ett första steg använder vi jQuerys ajax-funktion för att hämta data från filen:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Antagen att AJAX-förfrågan är framgångsrik utförs successFunction. Den här funktionen ansvarar för att analysera de returnerade uppgifterna och omvandla dem till en HTML-tabell:
Tanken är att omvandla varje CSV-rad till en tabellrad. Med det i åtanke ska vi kort förklara hur koden ovan fungerar:
- Först använder vi en regex för att dela upp AJAX-svaret och därmed separera CSV-raderna.
- Därefter itererar vi genom CSV-raderna och delar upp deras datafält.
- Slutligt loopar vi genom datafälten och skapar motsvarande tabellceller.
För att få en bättre förståelse för den här koden kan du dessutom tänka på följande visualisering:
I det här läget är det viktigt att förtydliga varför vi använde /\r?\n|\r/-regex för att dela upp CSV-raderna.
Som du antagligen redan vet finns det olika representationer av en nyrad i olika operativsystem. På Windows-plattformar är till exempel tecknen som representerar en ny rad \r\n. Med det sagt kan vi genom att använda regexet ovan matcha alla dessa möjliga representationer.
De flesta textredigerare tillåter oss dessutom att välja format för en nyrad. Ta till exempel Notepad++. I denna editor kan vi ange önskat format för ett dokument genom att navigera till den här sökvägen:
För att illustrera det kan vi betrakta vår fil. Beroende på vilket format vi väljer skulle den se ut så här:
Lägga till stilar till HTML-tabellen
För att titta på den resulterande tabellen ska vi lägga till några grundläggande stilar till den:
Här är den genererade tabellen:
Hur man analyserar en CSV-fil med Papa Parse-biblioteket
I det här avsnittet ska vi se hur du kan använda Papa Parse-biblioteket för att analysera en CSV-fil på ett ögonblick! Papa Parse är en riktigt kraftfull CSV-parser som ger dig många konfigurationsalternativ, och du kan använda den även för riktigt stora CSV-filer.
Biblioteket Papa Parse finns tillgängligt på npm, och om du inte vill använda npm kan du istället hämta det officiella Papa Parse npm-paketet från unpkg.
Hur det fungerar
Följande exempel visar hur enkelt det är att analysera en CSV-sträng.
var results = Papa.parse(data); // data is a CSV string
Variabeln results innehåller följande innehåll:
Som du kan se innehåller Results.data en array med alla rader. Om det finns några fel under parsningen kommer de att finnas i Results.errors. Slutligen kan du använda Results.meta för att få tillgång till metainformation om CSV-strängen.
Om du däremot vill analysera en lokal CSV-fil direkt kan du skicka ett JavaScript File-objekt:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
Och du kan också skicka in URL:en till en fjärr-CSV-fil:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Avstånd från grundläggande analysering ger Papa Parse många andra funktioner som t.ex:
- streaming av stora filer (så att du kan bearbeta dem rad för rad)
- reverse parsing (för att skicka ut CSV från ett JavaScript-objekt)
- jQuery-integration
- och mycket mer
Jag uppmuntrar dig att utforska det här biblioteket eftersom det är riktigt kraftfullt och enkelt att använda!
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 konvertering, men jag tror att det alltid är mer utmanande att åstadkomma detta genom att skriva sin egen kod.