Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Einfaches CSV-Parsing auf Server- und Client-Seite

CSV-Dateien sind für Menschen schwer lesbar und müssen auch für Maschinen konvertiert werden. (Foto: t3n)

Für den Datenimport und -export ist CSV ein sehr beliebtes Dateiformat. Wir zeigen dir wie du die Daten server- und clientseitig verarbeiten kannst.

Das Dateiformat CSV steht für „Comma-seperated Values“ beziehungsweise „Character-separated Values“ (da ein Trennzeichen nicht zwingend ein Komma sein muss) und beschreibt den Aufbau einer Textdatei zum Speichern und Austauschen von strukturierten Daten – wie zum Beispiel Tabellen. Für CSV gibt es keinen festgeschriebenen Standard, jedoch wird es grundlegend im RFC4180 beschrieben.

Es gibt viele verschiedene Szenarien, wie CSV-Dateien in Webseiten und WebApps genutzt werden können. Um Daten serverseitig verarbeiten zu können, müssen die Daten entsprechend aufbereitet werden. Also von reiner Textform in Arrays oder Objekte konvertiert werden – man spricht von so genanntem „Parsing“. In der Regel kommt hierfür serverseitige Lösungen zum Einsatz. So kann beispielsweise mit PHP eine CSV-Datei nach einem Dateiupload umgewandelt und weiterverarbeitet werden.

CSV Datei
CSV Dateien sind für Menschen schwer lesbar und müssen auch für Maschinen konvertiert werden. (Foto: t3n)

CSV-Parsing auf Server-Seite

Die PHP-Funktion str_getcsv() kann einen CSV-String in ein Array umwandeln. Das folgende Snippet kann eine CSV-Datei in zwei Arrays, inklusiver Spaltenbezeichnungen, und den dazugehörigen Werten konvertieren.

$data = str_getcsv($csv, "\n");
$names = array();
$values = array();
$i=0;
foreach($data as &$row) {
$row = str_getcsv($row, ";");
if($i == 0){array_push($names,$row);}
else {array_push($values,$row);}
$i++;
}

Im Anschluss daran kann das Array automatisch durchlaufen und die Daten entsprechend verarbeitet, manipuliert und gespeichert werden.

CSV-Parsing auf Client-Seite

Manchmal kann es jedoch Sinn machen, diesen Prozess auf den Client auszulagern. Hierfür steht die JavaScript-Bibliothek CSV.js zur Verfügung. CSV.js übernimmt das Parsen der CSV-Datei und liefert ein Array mit den jeweiligen Werten zurück.

So kann bei einer Web-App die Verarbeitungszeit, die sonst bei der Kommunikation zwischen Client und Server entstehen würden, drastisch reduziert werden – da die Daten nicht zum Server und zurück geschickt werden müssen.

So funktioniert CSV.js

CSV.js hat keinerlei Abhängigkeiten, kann also ohne große Frameworks in deine Applikation eingebunden werden.

Mit var csv = new CSV(contents) – wobei „contents“ der CSV-String sein muss – initiierst du CSV.js. Die Methode parse() liefert dir die Daten des CSV-Strings als Array zurück.

<script src="csv.js"></script>
<script>
var csv = new CSV(contents);
</script>

Das Ganze lässt sich natürlich auch auf eine Zeile verkürzen.

var cdv = new CSV(contents).parse;

Nun stellt sich natürlich die Frage, wie man überhaupt an die Daten der CSV-Datei kommen soll, ohne sie zuerst an den Server zu schicken. Mit der HTML5-File-API ist das aber kein Problem: Mit dem folgenden Code erstellst du ein Datei-Input-Feld mit einem Event-Listender, der, sobald eine Datei vom Benutzer ausgewählt wird, mit der Verarbeitung durch CSV.js beginnt und das Ergebnis in der Konsole ausgibt.

<script src="csv.js"></script>
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
var csv = new CSV(contents).parse();
console.log(csv);
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>

CSV.js bietet zusätzliche Konfigurationsmöglichkeiten, die als Parameter übergeben werden können. Dazu zählen Angaben über die Trennzeichen für Zeilen und Spalten und die Angaben, ob die CSV-Datei in der ersten Zeile die Spaltenbezeichnungen beinhaltet oder nicht. Nach dem Parsen kann auch eine Callback-Funktion ausgegeben werden.

Das untenstehende Beispiel zeigt, wie eine CSV-Datei mit Spaltenbezeichnungen in der ersten Zeile korrekt verarbeitet werden kann.

var data = '\
year,age,status,sex,population\r\n\
1850,20,0,1,1017281\r\n\
1850,20,0,2,1003841\r\n\
';
new CSV(data, { header: true }).parse();

Im GitHub Repository von CSV.js kannst du die Bibliothek herunterladen und selbst testen.

Fazit

Ob das Parsing auf Client- oder Server-Seite stattfinden sollte, wird wohl immer eine projektbezogene Entscheidung bleiben. Die Verarbeitung auf den Client auszulagern, birgt Vorteile in der Geschwindigkeit und der verminderten Auslastung des Servers, kann aber nicht verhindern, dass auch serverseitig noch mal überprüft werden muss, ob die übergebenen Daten auch wirklich so übernommen werden können. Größere Datenmengen könnten schwächere Geräte ins Straucheln geraten lassen, sodass eine vom Server durchgeführte Berechnung vielleicht sinnvoller sein könnte. Hier gilt: „Probieren geht über Studieren“. Erst im Testbetrieb werden mögliche Vor- und Nachteile der verschiedenen Techniken sichtbar.

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
k

Ernsthaft? Das ist eigentlich eine der ersten Sachen, die man in jedem Programmierer-Einsteiger-Buch liest (Adressbuch, Gästebuch, Produktliste). Eine Fachzeitschrift ist dass hier auch nicht mehr :-/

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.