CSV Datei mit AJAX laden und Tabelle dynamisch erstellen

Mustache ist eine Templating Engine für JavaScript, hervorragend geeignet zum Einbinden dynamischer Inhalte

Datenquellen für dynamische Inhalte können vielfältig sein. Daten können zum Beispiel aus Datenbanken, aus dem WWW oder auch aus Dateien nachgeladen und in einer Seite dargestellt werden. Was die Darstellung betrifft, ist diese von den Daten unabhängig, also in den Daten selbst nicht vorgegeben oder anderweitig kodiert. Vielmehr ist die Fage der Darstellung eine Frage des Design derjenigen Seite in welcher dynamisch nachgeladene Daten darzustellen sind. Zweckmäßig wird die Frage der Darstellung über ein Template gelöst, ein Solches ist anpassungsfähig. Untenstehend nur ein Beispiel dafür wie Daten als CSV Datei per AJAX nachgeladen und über die Templating Engine Mustache in die Seite gerendert werden.

Das Template für Mustache




JavaScript zum Aufarbeiten der CSV

Gut zu sehen: Die CSV Datei wird per AJAX Request in den Browser geholt. Im AJAX Callback werden diese Daten so aufgearbeitet, daß Mustache.render() damit das Template rendern kann. Hierzu wird die CSV Datei in Zeilen und in Spalten zerlegt und anhand der Spaltenüberschriften, die in der ersten Zeile zu finden sind, wird für jede Zeile ein JS-Objekt ersellt. Mustache bekommt schließlich ein Array mit diesen JS-Objekten.



Hinweis: Sofern die CSV-Datei eine BOM beinhaltet, das ist für UTF-8 die Bytefolge EF BB BF, wird diese vom XHR-Object entfernt. Im Unicodesystem ist die UTF-8-BOM das Zeichen ZERO WIDTH NO-BREAK SPACE (Codepoint 0xFEFF) und somit in Textdateien praktisch unsichtbar.

Mit dem Rendern des Templates entsteht eine HTML Tabelle, siehe untenstehend.

Die Tabelle aus der CSV Datei


Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. s​os­@rolf­rost.de.