Listen von Objekten

IT 12.6 – Webanwendungen · Einheit 5 · Café-App Schritt 5

Lernziele

Du kannst Arrays und Objekte anlegen, auf ihre Werte zugreifen und sie verändern.
Du kannst eine Liste von Objekten durchlaufen und daraus HTML erzeugen.
Du kannst in einer Liste suchen, sie filtern und sortieren.
Du kannst Summen bilden und Einträge entfernen.
Du kannst fremden Code mit Listen lesen und das erzeugte HTML angeben.

Rückblick

1. Was macht warenkorb.push({ name: ‘Tee’, preis: 1 })?

Es hängt ein neues Objekt mit Name und Preis ans Ende der Liste warenkorb an.

2. Nach welchem Muster wird der Warenkorb angezeigt?

Ereignis → Zustand ändern → Anzeige komplett aus dem Zustand neu aufbauen.

3. Was ist der Unterschied zwischen for (let i = 0; i < 3; i++) und while?

for zählt meist eine feste Anzahl Durchläufe, while läuft, solange eine Bedingung gilt.

Zweimal dieselbe Speisekarte

Die Produkte des Cafés stehen jetzt an drei Stellen: in der Tabelle der Speisekarte, in den data-Angaben der Knöpfe und in der Auswahlliste des Bestellformulars. Als der Preis für Kakao auf 1,60 € steigt, wird er an einer Stelle vergessen. Außerdem wünscht sich das Team: „Nur vegane Produkte anzeigen“ und „nach Preis sortieren“.

Die Lösung: Die Daten stehen an einer Stelle, in einer Liste in JavaScript. Alles andere wird daraus erzeugt.

Erkunden: Daten in Listen

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Eine Liste von Objekten mittel

Schreibe zu jeder console.log-Zeile zuerst deine Vermutung auf. Führe den Code dann aus.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe, wie die Liste aufgebaut ist und was ein einzelner Eintrag enthält.

b) Erkläre die Ausgabe von produkte[3] vor dem push.

c) Beschreibe, was die for-Schleife am Ende tut. Vergleiche sie mit einer Schleife for (let i = 0; …).

Lösung

Erkundung 2: Aus Daten wird eine Tabelle mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Ergänze in der Liste ein sechstes Produkt. Beschreibe, was mit der Tabelle passiert.

b) Ändere die Schleife so, dass nur vegane Produkte erscheinen.

c) Ergänze, dass in #info steht, wie viele Produkte angezeigt werden und was sie zusammen kosten.

d) Probiere vor der Schleife die Zeile produkte.sort(); aus. Beschreibe, was passiert, und vermute, warum.

Tipp 1

Zu c): Zähle und addiere in der Schleife mit, so wie bei der Summe im Warenkorb.

Lösung

Arrays

Vergleicht eure Ergebnisse. Ein Array ist eine geordnete Liste von Werten. Die Stellen heißen Index und beginnen bei 0.

const pausen = ['1. große Pause', '2. große Pause'];
pausen[0];          // '1. große Pause'
pausen.length;      // 2
pausen.push('Mittag');    // anhängen → Länge 3
pausen.pop();             // letztes entfernen
pausen.includes('Mittag');   // false
pausen.indexOf('2. große Pause');   // 1 (−1, wenn nicht vorhanden)

Objekte

Ein Objekt fasst zusammengehörige Werte unter Eigenschaften (Namen) zusammen:

const produkt = { id: 1, name: 'Kakao', preis: 1.5, vegan: false };
produkt.name;            // 'Kakao' (Punktschreibweise)
produkt['preis'];        // 1.5 (Klammerschreibweise)
produkt.preis = 1.6;     // ändern
produkt.bestand = 20;    // neue Eigenschaft hinzufügen

Ein Array von Objekten ist wie eine Tabelle: Jedes Objekt ist eine Zeile, jede Eigenschaft eine Spalte. Diese Form hat fast jede Webanwendung: Produkte, Reisen, Teilnehmende, Bücher.

Durchlaufen

// 1. mit Index
for (let i = 0; i < produkte.length; i++) {
  console.log(produkte[i].name);
}

// 2. for … of: direkt die Einträge
for (const p of produkte) {
  console.log(p.name);
}

// 3. forEach mit einer Funktion
produkte.forEach((p) => console.log(p.name));

Alle drei sind gleichwertig. Den Index braucht man, wenn die Stelle wichtig ist (zum Beispiel „Platz 1, 2, 3“).

Suchen

Gesucht ist ein Eintrag, zum Beispiel mit einer bestimmten id. Gibt es ihn nicht, liefert die Funktion null:

function findeProdukt(id) {
  for (const p of produkte) {
    if (p.id === id) {
      return p;      // gefunden: sofort zurückgeben
    }
  }
  return null;       // erst nach der Schleife: nichts gefunden
}

Kürzer: produkte.find((p) => p.id === id) liefert den ersten Treffer oder undefined.

Filtern

Gesucht sind alle Einträge, die eine Bedingung erfüllen. Ergebnis ist eine neue Liste:

// mit Schleife
const vegane = [];
for (const p of produkte) {
  if (p.vegan) {
    vegane.push(p);
  }
}

// mit filter
const vegane2 = produkte.filter((p) => p.vegan);
const guenstige = produkte.filter((p) => p.preis < 1.2);

Suche nach Text, ohne auf Groß- und Kleinschreibung zu achten:

const begriff = 'BRÖT';
const treffer = produkte.filter((p) => p.name.toLowerCase().includes(begriff.toLowerCase()));

Sortieren

sort bekommt eine Vergleichsfunktion. Sie erhält zwei Einträge a und b und liefert eine negative Zahl, wenn a nach vorne gehört, eine positive, wenn b nach vorne gehört, und 0 bei Gleichstand.

produkte.sort((a, b) => a.preis - b.preis);   // aufsteigend nach Preis
produkte.sort((a, b) => b.preis - a.preis);   // absteigend
produkte.sort((a, b) => a.name.localeCompare(b.name));   // nach Name, mit Umlauten richtig

sort verändert die Liste selbst. Soll die ursprüngliche Reihenfolge erhalten bleiben, sortiert man eine Kopie: const sortiert = [...produkte].sort(…);

Eine Funktion für beide Richtungen bekommt die Richtung als Parameter, statt zwei fast gleiche Funktionen zu schreiben.

Summieren und entfernen

let summe = 0;
for (const p of warenkorb) {
  summe += p.preis;
}

Einen Eintrag entfernen: eine neue Liste ohne ihn bilden.

warenkorb = warenkorb.filter((p) => p.id !== 3);   // alle außer id 3

Alternativ entfernt liste.splice(index, 1) einen Eintrag an einer bestimmten Stelle. Das Leeren geht mit warenkorb = [];.

HTML aus Daten erzeugen

Zwei Wege kennst du aus Einheit 3: HTML-Text zusammensetzen und mit innerHTML einsetzen, oder Elemente mit createElement erzeugen. Für Knöpfe mit Reaktion ist der zweite Weg sicherer:

function karteAnzeigen(liste) {
  const ziel = document.getElementById('karte');
  ziel.innerHTML = '';
  for (const p of liste) {
    const knopf = document.createElement('button');
    knopf.textContent = p.name;
    knopf.addEventListener('click', () => hinzufuegen(p));
    ziel.append(knopf);
  }
}

Café-App: Schritt 5

Café-App, Schritt 5: Die Speisekarte aus Daten schwer

Lege in app.js eine Konstante PRODUKTE mit allen sechs Produkten an: id, name, preis, vegan.
Ersetze in speisekarte.html alle Zeilen im tbody durch einen leeren <tbody id="karte"></tbody>.
Schreibe eine Funktion karteAnzeigen(liste), die für jedes Produkt eine Tabellenzeile mit Name, Preis, Hinweis („vegan“ oder „–“) und einem Knopf „+“ erzeugt. Der Knopf legt das Produkt in den Warenkorb.
Ergänze über der Tabelle ein Häkchen „nur vegan“ und eine Auswahlliste „Sortierung“ (wie in der Karte, Preis aufsteigend, Preis absteigend). Bei jeder Änderung wird die Karte neu angezeigt.
Der Warenkorb speichert jetzt die Produkt-Objekte. Ergänze in der Warenkorb-Liste je Eintrag einen Knopf „entfernen“.
Fülle auch die Auswahlliste in bestellen.html aus PRODUKTE.

Tipp 1

Eine Funktion aktualisieren() liest Häkchen und Sortierung, bildet daraus mit filter und sort eine Liste und ruft karteAnzeigen damit auf. Häkchen und Auswahlliste bekommen je einen change-Listener, der aktualisieren aufruft.

Tipp 2

Zum Entfernen braucht jeder Warenkorb-Eintrag eine Kennung. Da dasselbe Produkt mehrmals im Korb liegen kann, entferne nach der Stelle in der Liste: warenkorb.splice(i, 1).

Tipp 3

Eine Option für die Auswahlliste: const option = document.createElement('option'); option.value = p.id; option.textContent = p.name;

Stand nach Schritt 5

Aufgaben

Aufgabe 1: Code lesen – Konzertkarten leicht

const KONZERTE = [
  { id: 1, band: 'Die Pausenbrote', ort: 'Aula', karten: 40, preis: 5 },
  { id: 2, band: 'Lehrerband', ort: 'Mensa', karten: 0, preis: 3 },
  { id: 3, band: 'Schulchor', ort: 'Kirche', karten: 12, preis: 0 },
];

function preisText(k) {
  if (k.preis === 0) {
    return 'Eintritt frei';
  }
  return k.preis + ' €';
}

function zeigeKonzerte(liste) {
  let html = '';
  for (let i = 0; i < liste.length; i++) {
    const k = liste[i];
    if (k.karten > 0) {
      html += '<div class="konzert">';
      html += '<h3>' + k.band + '</h3>';
      html += '<p>' + k.ort + ' · ' + preisText(k) + '</p>';
      html += '</div>';
    }
  }
  document.getElementById('konzerte').innerHTML = html;
}

zeigeKonzerte(KONZERTE);

a) Gib den HTML-Code des Elements mit der ID konzerte nach dem Aufruf an.

b) Skizziere die Browseransicht schematisch.

Lösung

Aufgabe 2: Ein Buch finden mittel

Implementiere die Funktion findeBuch(id), die aus BUECHER das Buch mit passender id zurückgibt. Gibt es kein solches Buch, liefert sie null.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 3: Suche nach Titeln mittel

Implementiere die Funktion suche(begriff). Sie liefert eine Liste aller Bücher, deren Titel den Suchbegriff enthält. Groß- und Kleinschreibung spielt keine Rolle. Ein leerer Suchbegriff liefert alle Bücher.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 4: Eine Sortierfunktion für beide Richtungen mittel

Im Code einer Reise-App gibt es zwei Funktionen sortiereAufsteigend(liste) und sortiereAbsteigend(liste), die sich nur in einer Zeile unterscheiden.

a) Nimm Stellung zur Behauptung, man könne beide durch eine Funktion ersetzen.

b) Implementiere sortiereNachPreis(liste, richtung). richtung ist 'auf' oder 'ab'. Die Funktion liefert eine neue, sortierte Liste. Die übergebene Liste bleibt unverändert.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 5: Der Getränkeautomat schwer

Der Getränkeautomat der Schule wird über eine Webseite verwaltet. Jedes Getränk hat einen Bestand.

a) Implementiere verkaufe(id): Ist das Getränk vorhanden und der Bestand größer als 0, verringert sie den Bestand um 1 und liefert true. Sonst ändert sie nichts und liefert false.

b) Implementiere zeigeAutomat(): Für jedes Getränk entsteht in #automat ein Listenpunkt Wasser: 3 Stück. Getränke mit Bestand 0 bekommen die Klasse leer und den Text Cola: ausverkauft.

c) Beschreibe eine Möglichkeit, ein Getränk ganz aus der Liste zu entfernen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Zu a): Suche das Getränk wie in Aufgabe 2. Prüfe dann zwei Dinge: gefunden? Bestand größer als 0?

Tipp 2

Zu b): Liste zu Beginn leeren. Für jedes Getränk ein li erzeugen. Text und Klasse hängen von bestand ab.

Lösung

Zusatzaufgabe: Statistik der Speisekarte schwer Zusatz

Implementiere statistik(liste). Sie liefert ein Objekt mit drei Eigenschaften: anzahl (Zahl der Produkte), durchschnitt (Durchschnittspreis, auf zwei Stellen gerundet) und teuerstes (Name des teuersten Produkts).

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Zusammenfassung

Ein Array ist eine Liste mit Index ab 0. length, push, pop, includes.
Ein Objekt hat Eigenschaften: produkt.name. Ein Array von Objekten ist wie eine Tabelle.
Durchlaufen mit for (let i …), for (const p of …) oder forEach.
Suchen: Schleife mit return beim Treffer, return null nach der Schleife (oder find).
Filtern: neue Liste mit allen passenden Einträgen (filter). Sortieren mit Vergleichsfunktion, am besten eine Kopie.
Summieren mit einer Schleife. Entfernen mit filter (neue Liste) oder splice.
HTML erzeugen: Text zusammensetzen oder createElement. Nicht innerHTML += in einer Schleife mit Reaktionen.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Arrays und Objekte anlegen und verändern? → Erkundung 1, Arrays, Objekte
Kannst du eine Liste durchlaufen und HTML erzeugen? → Erkundung 2, HTML aus Daten erzeugen, Café-App
Kannst du suchen, filtern und sortieren? → Suchen, Filtern, Sortieren, Aufgabe 2, Aufgabe 3, Aufgabe 4
Kannst du Summen bilden und entfernen? → Summieren und entfernen, Aufgabe 5
Kannst du fremden Code lesen und das erzeugte HTML angeben? → Aufgabe 1

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Array	geordnete Liste von Werten in eckigen Klammern
Index	Stelle in einem Array, beginnt bei 0
Objekt	Zusammenfassung von Werten unter Namen in geschweiften Klammern
Eigenschaft	ein Name mit Wert in einem Objekt, zum Beispiel `preis: 1.5`
`push` / `splice`	hinten anhängen / an einer Stelle entfernen
`for … of` / `forEach`	alle Einträge einer Liste der Reihe nach durchgehen
`find`	ersten passenden Eintrag suchen
`filter`	neue Liste mit allen passenden Einträgen bilden
`sort`	Liste mit einer Vergleichsfunktion ordnen
Vergleichsfunktion	sagt `sort`, welcher von zwei Einträgen zuerst kommt
`includes`	prüft, ob ein Text oder eine Liste etwas enthält

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „Konzepte clientseitiger Skriptsprachen“, „dynamisches Aktualisieren der Darstellung“ (Stand November 2022).
Freie Dokumentation zu Arrays: MDN Web Docs, developer.mozilla.org/de (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt. Die Buchtitel in den Aufgaben sind bekannte Jugend- und Schullektüren, genannt werden nur Titel und Autor.