Accentsconagua

Analysieren einer CSV-Datei mit JavaScript

Code
Share
Was Sie erstellen werden

Das CSV-Dateiformat (Comma Separated Values) ist eine beliebte Methode, um Daten zwischen Anwendungen auszutauschen.

In diesem kurzen Tipp erfahren Sie, wie Sie mithilfe von JavaScript die Daten einer CSV-Datei visualisieren können.

Erstellen einer CSV-Datei

Zunächst erstellen wir eine einfache CSV-Datei. Dafür nutzen wir Mockaroo, einen Online-Testdatengenerator. Hier ist unsere Datei:

Konvertieren einer CSV-Datei in eine HTML-Tabelle

Nachdem wir die Datei erstellt haben, können wir sie jetzt analysieren und eine zugehörige HTML-Tabelle erstellen.

Als ersten Schritt verwenden wir jQuery's Ajax Funktion zum Abrufen der Daten aus dieser Datei:

 $ .ajax (url: 'csv_data.csv', dataType: 'text',). done (successFunction);

Angenommen, die AJAX-Anforderung ist erfolgreich Erfolgsfunktion ausgeführt wird. Diese Funktion ist dafür verantwortlich, die zurückgegebenen Daten zu analysieren und in eine HTML-Tabelle umzuwandeln:

 Funktion successFunction (Daten) var allRows = data.split (/ \ r? \ n | \ r /); var table = ''; for (var singleRow = 0; singleRow) < allRows.length; singleRow++)  if (singleRow === 0)  table += ''; table + = '';  else table + = '';  var rowCells = allRows [singleRow] .split (','); for (var rowCell = 0; rowCell.) < rowCells.length; rowCell++)  if (singleRow === 0)  table += '';  else table + = '';  if (singleRow === 0) table + = ''; table + = ''; table + = '';  else table + = '';  table + = ''; table + = '
'; table + = rowCells [rowCell]; table + = ''; table + = rowCells [rowCell]; table + = '
'; $ ('body'). anhängen (Tabelle);

Die Idee ist also, jede der CSV-Zeilen in eine Tabellenzeile umzuwandeln. Lassen Sie uns kurz erläutern, wie der obige Code funktioniert:

  • Zunächst verwenden wir einen Regex, um die AJAX-Antwort zu teilen und somit die CSV-Zeilen zu trennen.
  • Anschließend durchlaufen wir die CSV-Zeilen und teilen ihre Datenfelder auf.
  • Zum Schluss durchlaufen wir die Datenfelder und erstellen die entsprechenden Tabellenzellen.

Zum besseren Verständnis dieses Codes sollten Sie die folgende Visualisierung berücksichtigen:

An dieser Stelle ist es wichtig zu klären, warum wir das verwendet haben / \ r? \ n | \ r / Regex, um die CSV-Zeilen zu teilen.

Wie Sie wahrscheinlich bereits wissen, gibt es verschiedene Darstellungen eines Newline-Betriebssystems. Auf Windows-Plattformen sind beispielsweise die Zeichen, die einen Zeilenumbruch darstellen \ r \ n. Indem wir den Regex oben verwenden, können wir all diese möglichen Darstellungen abgleichen.

Darüber hinaus erlauben uns die meisten Texteditoren, das Format für einen Zeilenumbruch zu wählen. Nehmen Sie zum Beispiel Notepad ++. In diesem Editor können Sie das gewünschte Format für ein Dokument festlegen, indem Sie zu diesem Pfad navigieren:

Um es zu veranschaulichen, betrachten Sie unsere Datei. Abhängig vom gewählten Format würde es so aussehen:

Stile zur HTML-Tabelle hinzufügen

Bevor wir uns die Ergebnistabelle ansehen, fügen wir einige grundlegende Stile hinzu:

 Tabelle Marge: 0 Auto; Text ausrichten: Mitte; Grenzzusammenbruch: Zusammenbruch; Grenze: 1px fest # d4d4d4;  tr: nth-child (gerade) background: # d4d4d4;  th, td padding: 10px 30px;  th border-bottom: 1px fest # d4d4d4;

Hier ist die generierte Tabelle:

Fazit

In diesem kurzen Artikel haben wir eine CSV-Datei in eine HTML-Tabelle konvertiert. Natürlich hätten wir ein webbasiertes Tool für diese Konvertierung verwenden können, aber ich denke, es ist immer schwieriger, dies durch das Schreiben Ihres eigenen Codes zu erreichen.

Code
×