CSV-Datei → HTML table

Ausgehend von folgender Excel Tabelle zur Bevölkerungsentwicklung unserer Verbandsgemeinde:

Excel Tabelle zur Bevölkerungsentwicklung

erhalten wir nach dem Speichern unter → CSV UTF-8... → entwicklung.csv, eine Datei mit folgendem Inhalt:

Alter;Anzahl;Veränderung in %
unter 3 Jahre;276;3,4
3 bis 5 Jahre;293;-2,7
6 bis 9 Jahre;411;2,5
10 bis 15 Jahre;650;6,4
16 bis 19 Jahre;436;-9,7
20 bis 34 Jahre;1484;-25,1
35 bis 49 Jahre;2171;3,3
50 bis 64 Jahre;2516;-29,1
65 bis 79 Jahre;3075;35,5
80 Jahre und älter;1514;37,1
unter 20 Jahre;2066;0,1
20 bis 64 Jahre;6171;-19,2
65 Jahre und älter;4589;36,1

Nun zum HTML - Teil:

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>CSV2Table</title>
  <link rel=stylesheet href=
   "https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <div class=container >
    <h1>CSV-Datei -> HTML table</h1>
    <h3>Bevölkerungsentwicklung</h3>
    <table data-csv=entwicklung.csv></table>
  </div>

Erläuterung¹:

Das vorliegende HTML-Code-Snippet enthält eine grundlegende Struktur für den Aufbau einer Webseite. Lassen Sie uns die einzelnen Elemente erläutern:

<!DOCTYPE html>: Dies ist eine sogenannte Doctype-Deklaration und gibt an, dass es sich um ein HTML-Dokument handelt.
<html lang=de>: Dieses Tag definiert den Startpunkt des HTML-Dokuments und gibt die Sprache des Inhalts an. In diesem Fall ist es Deutsch (de).
<meta charset=UTF-8>: Dieses Meta-Tag gibt die Zeichenkodierung für das Dokument an. UTF-8 ist ein gängiger Zeichensatz, der eine breite Palette von Zeichen unterstützt, einschließlich internationaler Zeichen.
<title>CSV2Table</title>: Dieses Tag definiert den Titel der Webseite, der normalerweise im Titelbalken des Browsers angezeigt wird. In diesem Fall lautet der Titel "CSV2Table".
<link rel=stylesheet href = "https://unpkg.com/@picocss/pico@latest/css/pico.min.css">: Dieses Tag verbindet das HTML-Dokument mit einer externen CSS-Datei. Das rel-Attribut definiert die Beziehung zwischen dem Dokument und der verlinkten Datei (hier handelt es sich um ein Stylesheet). Das href-Attribut gibt den Pfad zur CSS-Datei an.
<div class=container>: Dieses Tag definiert einen Bereich innerhalb des Dokuments, der als Container fungiert. Das class-Attribut weist dem Container die Klasse "container" zu, die später möglicherweise von CSS-Regeln verwendet wird.
<h1>CSV-Datei -> HTML table</h1>: Dieses Tag definiert eine Überschrift der Ebene 1 (h1), die den Text "CSV-Datei -> HTML table" enthält. Diese Überschrift wird normalerweise in größerer Schriftgröße dargestellt.
<h3>Bevölkerungsentwicklung</h3>: Dieses Tag definiert eine Überschrift der Ebene 3 (h3), die den Text "Events for February" enthält. Diese Überschrift wird normalerweise in einer kleineren Schriftgröße als die Überschrift der Ebene 1 dargestellt.
<table data-csv=entwicklung.csv></table>: Dieses Tag definiert eine HTML-Tabelle. Das data-csv-Attribut wird verwendet, um zusätzliche Daten oder Metadaten für das Element anzugeben. In diesem Fall ist der Wert "entwicklung.csv". Dieser Wert wird später von JavaScript-Code verwendet, um die Tabelle mit Daten aus einer CSV-Datei zu füllen.

Nun der Javascript Teil:

<script>
  const CsvToTable = async (tableElement) => {
    try {        
        const req = await fetch(tableElement.dataset.csv, {
          method: 'get',
          headers: {
            'content-type': 'text/csv;charset=UTF-8'}
        });
        if (req.status === 200) {
          const csv = await req.text();
          let myTableArray = csv.split('\n')
          let myTable=`<thead><tr><th>
           ${myTableArray[0].replaceAll(';',
          '<th>')}</tr></thead><tbody>`
          myTableArray.shift()
          myTableArray.forEach((aktRow) => {
          myTable+=`<tr><td>${aktRow.replaceAll(
          ';','<td>')}</tr></tbody>`})
          document.querySelector('table').
           insertAdjacentHTML('afterBegin', myTable)
        } else {
          console.log(`Error code ${req.status}`);
        }
    } catch (err) {console.log(err)}
  } 
 CsvToTable(document.querySelector('[data-csv]'))
</script>

Erläuterungen:

Der gegebene JavaScript-Code definiert eine Funktion namens CsvToTable, die eine CSV-Datei in eine HTML-Tabelle umwandelt. Lassen Sie uns den Code im Detail erläutern:

const CsvToTable = async (tableElement) => {...}: Dies definiert eine asynchrone Funktion mit dem Namen CsvToTable, die einen Parameter tableElement erwartet. Diese Funktion konvertiert die CSV-Datei in eine HTML-Tabelle.
try {...} catch (err) {...}: Dies ist eine Blockstruktur, die es ermöglicht, potenzielle Fehler abzufangen und zu behandeln.
const req = await fetch(tableElement.dataset.csv, {...}): Hier wird die fetch-Funktion verwendet, um die CSV-Datei von der URL zu laden, die im data-csv-Attribut des tableElement angegeben ist. Die Funktion fetch gibt ein Promise-Objekt zurück, das in der await-Anweisung aufgelöst wird.
if (req.status === 200) {...}: Hier wird überprüft, ob die HTTP-Antwort erfolgreich war (Statuscode 200). Wenn dies der Fall ist, wird der Code im if-Block ausgeführt.
const csv = await req.text(): Hier wird der Inhalt der CSV-Datei als Text aus dem HTTP-Antwortobjekt extrahiert. Die text()-Methode gibt ein weiteres Promise-Objekt zurück, das in der await-Anweisung aufgelöst wird.
let myTableArray = csv.split('\n'): Hier wird der CSV-Text in ein Array aufgeteilt, wobei jede Zeile des CSVs ein Element im Array wird. Das Zeilentrennzeichen ist ein Zeilenumbruch (\n).
let myTable = <thead>...</tbody>...: Hier wird eine Zeichenkette myTable erstellt, die den HTML-Code für die Tabelle enthält. Die erste Zeile des Arrays (myTableArray[0]) wird als Kopfzeile der Tabelle verwendet, während die restlichen Zeilen als Körper der Tabelle behandelt werden.
myTableArray.shift(): Hier wird das erste Element des Arrays (die Kopfzeile) entfernt, da sie bereits als Kopfzeile in myTable verwendet wurde.
myTableArray.forEach((aktRow) => {...}): Hier wird eine Schleife durch alle verbleibenden Zeilen des Arrays durchlaufen. Für jede Zeile wird der HTML-Code für eine Tabellenzeile (<tr>) in myTable hinzugefügt.
document.querySelector('table').insertAdjacentHTML('afterBegin', myTable): Hier wird die generierte HTML-Tabelle in das erste table-Element des Dokuments eingefügt.
console.log(Error code {req.status}): Wenn die HTTP-Antwort nicht erfolgreich war, wird eine Fehlermeldung mit dem entsprechenden Fehlercode ausgegeben.
} catch (err) {console.log(err)}: Hier wird ein Fehler abgefangen, falls während des asynchronen Vorgangs ein Fehler auftritt, und die Fehlermeldung wird in der Konsole ausgegeben.
CsvToTable(document.querySelector('[data-csv]')): Hier wird die CsvToTable-Funktion aufgerufen und als Argument das erste Element mit dem Attribut data-csv im Dokument übergeben. Dies ermöglicht die Konvertierung der CSV-Datei in eine Tabelle.

Insgesamt handelt es sich um einen JavaScript-Code, der mithilfe der Fetch-API die CSV-Daten lädt, diese in eine HTML-Tabelle umwandelt und die Tabelle in das Dokument einfügt.

Zusammenfassung:

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>CSV2Table</title>
  <link rel=stylesheet href=
   "https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <div class=container >
    <h1>CSV-Datei -> HTML table</h1>
    <h3>Bevölkerungsentwicklung</h3>
    <table data-csv=entwicklung.csv></table>
  </div>
  <script>
  const CsvToTable = async (tableElement) => {
    try {        
        const req = await fetch(tableElement.dataset.csv, {
          method: 'get',
          headers: {
            'content-type': 'text/csv;charset=UTF-8'}
        });
        if (req.status === 200) {
          const csv = await req.text();
          let myTableArray = csv.split('\n')
          let myTable=`<thead><tr><th>
           ${myTableArray[0].replaceAll(';',
          '<th>')}</tr></thead><tbody>`
          myTableArray.shift()
          myTableArray.forEach((aktRow) => {
          myTable+=`<tr><td>${aktRow.replaceAll(
          ';','<td>')}</tr></tbody>`})
          document.querySelector('table').
           insertAdjacentHTML('afterBegin', myTable)
        } else {
          console.log(`Error code ${req.status}`);
        }
    } catch (err) {console.log(err)}
  } 
 CsvToTable(document.querySelector('[data-csv]'))
</script>

Das Ergebnis (HTML Darstellung):

Alter	Anzahl	Veränderung in %
unter 3 Jahre	276	3,4
3 bis 5 Jahre	293	-2,7
6 bis 9 Jahre	411	2,5
10 bis 15 Jahre	650	6,4
16 bis 19 Jahre	436	-9,7
20 bis 34 Jahre	1484	-25,1
35 bis 49 Jahre	2171	3,3
50 bis 64 Jahre	2516	-29,1
65 bis 79 Jahre	3075	35,5
80 Jahre und älter	1514	37,1
unter 20 Jahre	2066	0,1
20 bis 64 Jahre	6171	-19,2
65 Jahre und älter	4589	36,1

Die Erläuterungen zum HTML und Javascript Code wurden durch CHATGPT erstellt. Das Ergebnis ist brauchbar 😀⏎

Leistung

Barrierefreiheit

SEO

Best Practices