CSV-Datei → HTML table
Ausgehend von folgender Excel Tabelle zur Bevölkerungsentwicklung unserer Verbandsgemeinde:
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äuterung1:
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 NamenCsvToTable
, die einen ParametertableElement
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 diefetch
-Funktion verwendet, um die CSV-Datei von der URL zu laden, die imdata-csv
-Attribut destableElement
angegeben ist. Die Funktionfetch
gibt ein Promise-Objekt zurück, das in derawait
-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 imif
-Block ausgeführt. -
const csv = await req.text()
: Hier wird der Inhalt der CSV-Datei als Text aus dem HTTP-Antwortobjekt extrahiert. Dietext()
-Methode gibt ein weiteres Promise-Objekt zurück, das in derawait
-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 ZeichenkettemyTable
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 inmyTable
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>
) inmyTable
hinzugefügt. -
document.querySelector('table').insertAdjacentHTML('afterBegin', myTable)
: Hier wird die generierte HTML-Tabelle in das erstetable
-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 dieCsvToTable
-Funktion aufgerufen und als Argument das erste Element mit dem Attributdata-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 😀⏎