Zum Inhalt
wannacode

Daten in Dateien

Kurz gesagt: CSV ist eine Textdatei, in der jede Zeile ein Datensatz ist und die Werte durch Kommas getrennt sind; das Programm teilt die Zeilen in Teile und macht daraus Objekte.

Problem

Text, aber du brauchst Zahlen

Das Lager exportiert seine Produkte in eine Datei. Jede Zeile ist ein Produkt: Name, Preis und Bestand, durch Kommas getrennt. Die erste Zeile sagt, was in jeder Spalte steht:

products.csv
Name,Preis,Bestand
Brot,1.20,30
Milch,2.10,18
Kaffeebohnen,18.90,12

Die Datei lesen kannst du schon. Aber für das Programm ist die Zeile nur Text:

const line = "Brot,1.20,30";
console.log(line.length);
console.log(line[5]);
Ausgabe
12
1

Es weiß nicht, dass 1.20 ein Preis ist und 30 eine Anzahl. Um auszurechnen, was die Ware wert ist, musst du jede Zeile in etwas mit Feldern verwandeln: in ein Product-Objekt.

Die Idee

CSV: Zeile zu Objekt

So eine Datei heißt CSV (comma-separated values, „durch Kommas getrennte Werte“). Excel liest sie, Datenbanken lesen sie, jedes Programm liest sie. Eine Zeile wird in drei Schritten zum Objekt: split, jeden Teil in den passenden Typ umwandeln, der Konstruktor.

Am bequemsten ist das eine statische Methode (static) in der Klasse selbst:
function toNumber(text) {
const n = Number(text);
if (text.trim() === "" || Number.isNaN(n)) {
throw new Error(`ungültige Zahl (${text.trim()})`);
}
return n;
}
class Product {
constructor(name, price, stock) {
this.name = name;
this.price = price;
this.stock = stock;
}
static fromCsv(line) {
const f = line.split(",");
if (f.length !== 3) {
throw new Error(`3 Spalten erwartet, es sind ${f.length}`);
}
return new Product(f[0].trim(), toNumber(f[1]), toNumber(f[2]));
}
toCsv() {
return `${this.name},${this.price},${this.stock}`;
}
}
const p = Product.fromCsv("Kaffeebohnen,18.90,12");
console.log(`${p.name}: ${p.price.toFixed(2)} € x ${p.stock} = ${(p.price * p.stock).toFixed(2)} €`);
Ausgabe
Kaffeebohnen: 18.90 € x 12 = 226.80 €

fromCsv ist die einzige Stelle, die weiß, wie die Zeile aussieht. Ändert sich das Format, änderst du nur sie. Die Prüfung der Spaltenanzahl wirft einen Fehler mit einer klaren Meldung, statt dass das Programm später mit einer unklaren abbricht.

Number("sieben") wirft keinen Fehler. Es gibt NaN („not a number“, keine Zahl), und Number("") gibt 0. Ein Programm, das nicht prüft, rechnet still mit falschen Zahlen. Deshalb prüft toNumber den Text und wirft selbst.

Was fromCsv mit der Zeile macht, Schritt für Schritt, mit seinem Rumpf Zeile für Zeile ausgeschrieben:

const line = "Kaffeebohnen,18.90,12";
const f = line.split(",");
const name = f[0];
const price = Number(f[1]);
const stock = Number(f[2]);
const p = new Product(name, price, stock);
console.log(`${p.name}: ${p.price} € x ${p.stock}`);
console.log(`${(p.price * p.stock).toFixed(2)} €`);
Schritt für Schritt, in Worten
  1. Die Zeile aus der Datei ist ein String. Für das Programm ist die 18.90 darin nur vier Zeichen.
  2. split schneidet die Zeile an jedem Komma: ein Array aus drei Strings.
  3. Der Name bleibt ein String.
  4. Number macht aus dem String "18.90" die Zahl 18.9. Mit ihr kannst du jetzt rechnen.
  5. Number macht aus "12" die Zahl 12. In JavaScript sind der Preis und die Anzahl beide number.
  6. new Product legt die drei Werte in die Felder eines neuen Objekts, und p zeigt darauf.
  7. p.price wird als 18.9 ausgegeben: Die Null am Ende stand nur im Text.
  8. Der Preis mal den Bestand: Jetzt ist es eine Rechnung mit Zahlen.

Sieh es dir an

Die ganze Datei

Du lädst alle Produkte in ein Array und rechnest den Wert der Ware aus. Hier und ab jetzt steht import { readFileSync, writeFileSync } from "node:fs"; ganz oben und wird nicht gezeigt:
try {
writeFileSync("products.csv", "Name,Preis,Bestand\nBrot,1.20,30\nMilch,2.10,18\nKaffeebohnen,18.90,12\n");
const lines = readFileSync("products.csv", "utf8").trimEnd().split("\n");
const products = [];
let header = true;
for (const line of lines) {
if (header) {
header = false;
continue;
}
products.push(Product.fromCsv(line));
}
let value = 0;
for (const p of products) {
value += p.price * p.stock;
}
console.log(`${products.length} Produkte, Warenwert ${value.toFixed(2)} €`);
} catch (e) {
console.log(`Fehler beim Lesen von products.csv: ${e.message}`);
}
Ausgabe
3 Produkte, Warenwert 300.60 €
  • products beginnt als leeres Array, und push hängt jedes neue Produkt an sein Ende. products.length ist, wie viele es sind.
  • header ist nur im ersten Durchlauf true. Dann wird die Zeile mit continue übersprungen.

Mehr über Arrays, die wachsen, gibt es im Modul „Collections“.

Die Idee

Fehlerhafte Zeilen

Die Dateien schreiben Menschen und andere Programme. Früher oder später kommt eine Zeile ohne eine Spalte, mit einem Wort statt einer Zahl, oder eine leere Zeile:

products.csv
Name,Preis,Bestand
Brot,1.20,30
Milch,2.10
Kaffee,sieben,4
Tee,3.50,25

Ein Fehler soll nicht das Laden von allem anderen stoppen. Jede Zeile steht in ihrem eigenen try, und die Meldung nennt die Nummer der Zeile, damit jemand sie korrigieren kann:

try {
writeFileSync("products.csv", "Name,Preis,Bestand\nBrot,1.20,30\nMilch,2.10\nKaffee,sieben,4\n\nTee,3.50,25\n");
const lines = readFileSync("products.csv", "utf8").trimEnd().split("\n");
const products = [];
let row = 0;
for (const line of lines) {
row++;
if (row === 1 || line.trim() === "") {
continue;
}
try {
products.push(Product.fromCsv(line));
} catch (e) {
console.log(`Zeile ${row}: ${e.message}`);
}
}
console.log(`Geladen: ${products.length}`);
} catch (e) {
console.log(`Fehler beim Lesen von products.csv: ${e.message}`);
}
Ausgabe
Zeile 3: 3 Spalten erwartet, es sind 2
Zeile 4: ungültige Zahl (sieben)
Geladen: 2
  • Leere Zeilen werden mit line.trim() === "" übersprungen.
  • Ein catch fängt beide Fehler, die fromCsv wirft: den für die Spaltenanzahl und den von toNumber. Was passiert ist, sagt e.message.
  • Das Programm sagt „Geladen: 2“ und macht mit ihnen weiter.

Probier es aus

Leere Spalten

In der ersten Zeile ist der Preis leer, in der zweiten der Bestand. Die dritte Zeile macht aus einer leeren Spalte eine Zahl:

Was gibt das Programm aus?

console.log("Kaffee,,4".split(",").length);
console.log("Kaffee,7.50,".split(",").length);
console.log(Number(""));
Antwort

Die Idee

Objekte zu CSV

Die andere Richtung ist eine Methode, die die Zeile zusammenbaut:

toCsv() {
return `${this.name},${this.price},${this.stock}`;
}

Du schreibst die Kopfzeile und danach eine Zeile für jedes Objekt:

const stock = [new Product("Brot", 1.2, 30), new Product("Milch", 2.1, 18)];
try {
let text = "Name,Preis,Bestand\n";
for (const p of stock) {
text += `${p.toCsv()}\n`;
}
writeFileSync("stock.csv", text);
process.stdout.write(readFileSync("stock.csv", "utf8"));
} catch (e) {
console.log(`Fehler beim Schreiben von stock.csv: ${e.message}`);
}
Ausgabe
Name,Preis,Bestand
Brot,1.2,30
Milch,2.1,18

fromCsv kann diese Datei wieder einlesen. Speichern und Lesen müssen dasselbe Format verwenden.

Vorsicht, wenn du die Preise mit toLocaleString formatierst. Es folgt den Spracheinstellungen, und im Deutschen und in vielen anderen Sprachen ist das Dezimalzeichen ein Komma:

const de = `Brot,${(1.2).toLocaleString("de-DE", { minimumFractionDigits: 2 })},30`;
console.log(`${de} -> ${de.split(",").length} Spalten`);
const fixed = `Brot,${(1.2).toFixed(2)},30`;
console.log(`${fixed} -> ${fixed.split(",").length} Spalten`);
Ausgabe
Brot,1,20,30 -> 4 Spalten
Brot,1.20,30 -> 3 Spalten

1,20 wird zu zwei Spalten, und die Zeilen verschieben sich. Für Dateien, die ein anderes Programm liest, nimm toFixed(2). Damit kommt immer ein Punkt heraus, auf jedem Computer.

Probier es aus

Finde den Fehler

Das Programm soll die drei Produkte aus products.csv laden, aber es bricht schon bei der ersten Zeile ab:

Fehler
Error: ungültige Zahl (Preis)

Wähle die Zeile mit dem Fehler.

Die Idee

Spalten nach Namen

Ein anderes Programm exportiert dieselben Daten, aber mit den Spalten in einer anderen Reihenfolge und mit einer Spalte mehr. Schreibst du f[1] für den Preis, liest du bei einem neuen Format die falsche Spalte und merkst es nicht. Sicherer ist es, die Spalte über ihren Namen in der Kopfzeile zu finden:

function column(header, name) {
for (let i = 0; i < header.length; i++) {
if (header[i].trim().toLowerCase() === name.toLowerCase()) {
return i;
}
}
throw new Error(`Keine Spalte ${name}`);
}
try {
writeFileSync("export.csv", "Bestand,Name,Nummer,Preis\n30,Brot,1001,1.20\n18,Milch,1002,2.10\n");
let nameCol = -1;
let priceCol = -1;
for (const line of readFileSync("export.csv", "utf8").trimEnd().split("\n")) {
const f = line.split(",");
if (nameCol === -1) {
nameCol = column(f, "name");
priceCol = column(f, "preis");
continue;
}
console.log(`${f[nameCol]}: ${f[priceCol]} €`);
}
} catch (e) {
console.log(e.message);
}
Ausgabe
Brot: 1.20 €
Milch: 2.10 €

Der erste Durchlauf findet nur, wo die Spalten sind. Danach wird jede Zeile über diese Indizes gelesen. Gibt es die Spalte nicht, wirft column sofort eine Exception, statt falsche Daten zu lesen.

Genauer, für Neugierige
  • Ein Komma im Wert. „Gouda, mittelalt“ enthält ein Komma. In CSV kommt so ein Wert in Anführungszeichen: "Gouda, mittelalt",9.80,5, und ein Anführungszeichen darin wird doppelt geschrieben: "". Dann reicht split(",") nicht mehr. Node hat kein eingebautes Modul für CSV. In echten Projekten nimmt man eine Bibliothek wie csv-parse oder Papa Parse, die alle Regeln kennt.
  • Ein anderes Trennzeichen. Excel auf einem Computer mit deutschen Einstellungen speichert CSV oft mit ;, genau weil das Komma das Dezimalzeichen ist. Dann schneidest du die Zeile mit split(";").
  • JSON. Für Daten, die nur dein Programm liest, nimmt man in JavaScript meistens JSON: JSON.stringify(product) macht aus dem Objekt Text, und JSON.parse(text) macht ihn wieder zum Objekt.

Übung

Daten, die lebendig werden

Löse die Aufgaben in deinem Editor. Das Programm legt die Eingabedatei zuerst selbst an.

1. CSV-Auswertung. Lege people.csv mit dem Inhalt unten an. Gib das Durchschnittsalter aus (Ganzzahldivision), wer am ältesten ist und wie viele Personen aus jeder Stadt kommen, in der Reihenfolge, in der die Städte vorkommen. Die Städte speicherst du in einem Array, die Anzahlen in einem anderen, an denselben Indizes.

people.csv
Name,Alter,Stadt
Jonas,34,Berlin
Maria,28,Hamburg
Thomas,41,Berlin
Anna,25,München
Ausgabe
Durchschnittsalter: 32
Am ältesten: Thomas, 41
Personen aus Berlin: 2
Personen aus Hamburg: 1
Personen aus München: 1

2. Den Helden speichern. Eine Klasse Hero mit Name, Level, Leben und Gold. Die Methode save(path) speichert den Helden als Zeilen schlüssel=wert, und die statische Methode load(path) erzeugt aus so einer Datei einen neuen Hero. Erzeuge „Arin“ mit Level 6, 100 Leben und 120 Gold, erhöhe sein Level um 1, nimm ihm 15 Leben, gib ihm 220 Gold, speichere ihn, gib die Datei aus und lade ihn wieder.

Ausgabe
name=Arin
level=7
health=85
gold=340
Geladen: Arin, Level 7, Leben 85, Gold 340

3. Doppelter Text. Lege text.txt mit dem Text unten an. Teile ihn am Punkt (und den Leerzeichen danach) in Sätze und gib jeden Satz, der mehr als einmal vorkommt, einmal aus.

text.txt
Das ist Text. Das ist auch Text. Das ist Text.
Ausgabe
Doppelter Text: "Das ist Text."

Weitere Aufgaben

  • Das teuerste Produkt. Lade products.csv aus der Lektion und gib das Produkt mit dem höchsten Preis aus und wie viele Produkte einen Bestand unter 20 haben.
  • Korrigierte Zeilen. Lade die Datei mit den fehlerhaften Zeilen und schreibe die guten nach products-clean.csv und die fehlerhaften, mit der Nummer der Zeile und dem Grund, nach rejected.txt.
  • Umsatzbericht. Eine Datei sales.csv mit den Spalten Datum,Produkt,Anzahl,Preis. Die Zeilen sind nach Datum sortiert. Gib den Umsatz für jeden Tag mit padEnd und toFixed in Spalten aus.

Test

Teste dich

1. Was ist die erste Zeile der meisten CSV-Dateien?
2. Was gibt Number("sieben") zurück?
3. Was ist "Kaffee,7.50,".split(",").length?
4. Du speicherst Preise mit price.toLocaleString("de-DE", { minimumFractionDigits: 2 }). Was passiert mit der CSV-Datei?

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·