Advertisement
  1. Code
  2. JavaScript

Parsing einer CSV-Datei mit Hilfe von JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:

German (Deutsch) translation by Max Gruentgens (you can also view the original English article)

Final product image
What You'll Be Creating

Das CSV-Dateiformat (Comma Separated Values, durch Kommata getrennte Werte) wird sehr gerne eingesetzt, um Daten zwischen Anwendungen auszutauschen.

In diesem kurzen Text, werden wir lernen, auf welche Art und Weise JavaScript uns dabei helfen kann, die in einer CSV-Datei vorgehaltenen Daten zu visualisieren.

Erstellen einer CSV-Datei

Lasst uns zuallererst eine einfach CSV-Datei erstellen. Hierfür bedienen wir uns Mockaroo, einem online verfügbaren Test-Daten-Generator. Das hier ist unsere Datei:

Initial-CSV-File

Konvertierung einer CSV-Datei in die Form einer HTML-Tabelle

Nachdem wir nun die CSV-Datei erstellt haben, sind wir bereit, sie weiterzuverarbeiten und eine HTML-Tabelle zu generieren.

In einem ersten Schritt, werden wir jQuerys ajax Funktion nutzen, um die Daten aus der Datei abzufragen:

Sofern die AJAX Anfrage erfolgreich abgeschlossen wurde, wird die successFunction ausgeführt. Diese Funktion ist für die Weiterverarbeitung der zurückgegebenen Daten verantwortlich und wandelt sie in eine HTML-Tabelle um.

Der Plan ist also, jede Zeile innerhalb der CSV-Datei in eine Tabellenzeile umzuformen. Das im Hinterkopf, schauen wir uns den oben stehenden Code einmal genauer an:

  • Zuerst teilen wir die von AJAX zurückgegebenen Daten mit Hilfe eines RegEx auf und trennen auf diese Weise die einzelnen Zeilen der CSV-Datei voneinander.
  • Dann iterieren wir durch die einzelnen Zeilen der CSV-Datei und zerteilen sie jeweils in ihre entsprechenden Daten-Felder.
  • Schlussendlich verarbeiten wir mittels einer Schleife die einzelnen Daten-Felder und produzieren die entsprechenden Tabellen-Zellen.

Die folgende Visualisierung soll ein noch besseres Verständnis des Codes ermöglichen:

CSV-Representation

An diesem Punkt ist es wichtig, klarzustellen, warum wir /\r?\n|\r/ benutzt haben, um die Zeilen der CSV-Datei zu zerteilen.

Wie du vermutlich bereits weißt, wird ein Zeilenumbruch (Newline) auf verschiedenen Betriebssystemen unterschiedlich repräsentiert. Unter Windows wird ein Zeilenumbruch beispielsweise durch die Zeichenfolge \r\n dargestellt. Nichtsdestoweniger sind wir in der Lage, all diese möglichen Repräsentationen des Zeilenumbruchs mittels des obigen RegExes zu finden. 

Außerdem geben uns viele Text-Editoren die Möglichkeit, aus den möglichen Repräsentationen des Zeilenumbruchs auszuwählen. Notepad ++ beispielsweise. Mit diesem Editor können wir das für unser Dokument gewünschte Format festlegen, indem wir diesem Pfad folgen: 

Notepad++-EOL

Zur weiteren Illustration des Ganzen, schauen wir noch einmal in unsere Datei. Abhängig vom gewählten Format würde das Ganze in etwa so aussehen:

CSV-EOL

Hinzufügen von Styles zur HTML-Tabelle

Bevor wir uns die am Ende entstehende Tabelle anschauen, fügen wir noch ein paar einfache Stile hinzu: 

Hier kommt die erstellte Tabelle:

Generated-Table

Fazit

In diesem knappen Artikel haben wir uns angeschaut, wie eine CSV-Datei  in eine HTML-Tabelle transformiert wird. Natürlich hätten wir auch ein web-basiertes Tool für die Umwandlung benutzen können, doch bin ich der Meinung, dass es immer etwas anspruchsvoller ist, wenn man eine solche Aufgabe durch selbst geschriebenen Code bewältigt.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.