Das CSV-Dateiformat (Comma Separated Values) ist ein beliebtes Verfahren zum Austausch von Daten zwischen Anwendungen. In diesem Kurztipp erfahren wir, wie JavaScript uns helfen kann, die Daten einer CSV-Datei zu visualisieren.
Erstellen einer CSV-Datei
Zu Beginn erstellen wir eine einfache CSV-Datei. Dazu nutzen wir Mockaroo, einen Online-Testdatengenerator. Hier ist unsere Datei:
Konvertieren einer CSV-Datei in eine HTML-Tabelle
Nachdem wir die Datei erzeugt haben, können wir sie analysieren und eine zugehörige HTML-Tabelle erstellen.
In einem ersten Schritt verwenden wir die ajax-Funktion von jQuery, um die Daten aus dieser Datei abzurufen:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Angenommen, die AJAX-Anfrage ist erfolgreich, wird die successFunction-Funktion ausgeführt. Diese Funktion ist für das Parsen der zurückgegebenen Daten und deren Umwandlung in eine HTML-Tabelle verantwortlich:
Die Idee ist, jede der CSV-Zeilen in eine Tabellenzeile umzuwandeln. Lassen Sie uns kurz erklären, wie der obige Code funktioniert:
- Zuerst verwenden wir einen Regex, um die AJAX-Antwort aufzuteilen und so die CSV-Zeilen zu trennen.
- Dann durchlaufen wir die CSV-Zeilen und teilen ihre Datenfelder auf.
- Schließlich durchlaufen wir die Datenfelder und erstellen die entsprechenden Tabellenzellen.
Um diesen Code besser zu verstehen, sollten Sie sich die folgende Visualisierung ansehen:
An dieser Stelle ist es wichtig zu klären, warum wir die /\r?\n|\r/-Regex verwendet haben, um die CSV-Zeilen aufzuteilen.
Wie Sie wahrscheinlich bereits wissen, gibt es auf verschiedenen Betriebssystemen unterschiedliche Darstellungen eines Zeilenumbruchs. Auf Windows-Plattformen beispielsweise sind die Zeichen für einen Zeilenumbruch \r\n. Mit der obigen Regex können wir jedoch alle möglichen Darstellungen abgleichen.
Außerdem können wir in den meisten Texteditoren das Format für einen Zeilenumbruch auswählen. Nehmen wir zum Beispiel Notepad++. In diesem Editor können wir das gewünschte Format für ein Dokument angeben, indem wir zu diesem Pfad navigieren:
Um dies zu veranschaulichen, betrachten wir unsere Datei. Je nach gewähltem Format würde sie wie folgt aussehen:
HTML-Tabelle mit Stilen versehen
Bevor wir uns die resultierende Tabelle ansehen, sollten wir ihr ein paar grundlegende Stile hinzufügen:
Hier ist die generierte Tabelle:
Wie man eine CSV-Datei mit der Papa Parse Bibliothek analysiert
In diesem Abschnitt werden wir sehen, wie man die Papa Parse Bibliothek verwenden kann, um eine CSV-Datei im Handumdrehen zu analysieren! Papa Parse ist ein wirklich leistungsfähiger CSV-Parser, der viele Konfigurationsoptionen bietet und auch für sehr große CSV-Dateien verwendet werden kann.
Die Papa Parse-Bibliothek ist auf npm verfügbar, und wenn Sie npm nicht verwenden möchten, können Sie stattdessen das offizielle Papa Parse npm-Paket von unpkg herunterladen.
Wie es funktioniert
Das folgende Beispiel zeigt, wie einfach es ist, eine CSV-Zeichenfolge zu analysieren.
var results = Papa.parse(data); // data is a CSV string
Die Variable results enthält den folgenden Inhalt.
Wie Sie sehen können, enthält Results.data ein Array mit allen Zeilen. Wenn beim Parsen Fehler auftreten, werden diese in Results.errors angezeigt. Schließlich können Sie Results.meta verwenden, um auf Metainformationen über die CSV-Zeichenfolge zuzugreifen.
Wenn Sie hingegen eine lokale CSV-Datei direkt parsen wollen, können Sie ein JavaScript File-Objekt übergeben:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
Und Sie können auch die URL einer entfernten CSV-Datei übergeben:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Abgesehen vom grundlegenden Parsen bietet Papa Parse eine Menge anderer Funktionen wie:
- Streaming großer Dateien (um sie zeilenweise zu verarbeiten)
- Reverse Parsing (um CSV aus einem JavaScript-Objekt auszugeben)
- jQuery-Integration
- und mehr
Ich ermutige Sie, diese Bibliothek zu erkunden, da sie wirklich leistungsstark und einfach zu bedienen ist!
Abschluss
In diesem kurzen Artikel haben wir den Prozess der Konvertierung einer CSV-Datei in eine HTML-Tabelle durchlaufen. Natürlich hätten wir für diese Konvertierung auch ein webbasiertes Tool verwenden können, aber ich denke, dass es immer eine größere Herausforderung ist, dies zu erreichen, indem man seinen eigenen Code schreibt.