Mehrdimensionale Arrays – Array of Array

Tabellen als Array – Multidimensional

Tabellen sind ein typisches Beispiel für mehrdimensionale Arrays. Multidimensionale Arrays werden vor allem bei tabellarischen Daten, für Berechnungen und 2D-Darstellungen von Grafiken eingesetzt. So sind z.B. die Zeilen einer Tabelle Arrays, in denen die Zellen der Zeilen wieder von Arrays gebildet werden.

const items = [
  [1, "DE", "Hallo"],
  [3, "IT", "buongiorno"],
  [5, "FR", "bonjour"]
];
console.log (items);

Die Console zeigt

Zugriff auf Array-Elemente

Jedes Element des Arrays buecher ist ein Array aus drei Elementen. Das hier sind sechs Arrays – fünf innere und ein äußeres:

const buecher = [];

buecher[0] = ["Eine kurze Geschichte", "Bryson, Bill",        2003];
buecher[1] = ["Accidental Empires",    "Cringely, Robert X.", 1992];
buecher[2] = ["Arm und Reich",         "Diamond, Jared",      1997];
buecher[3] = ["Bezaubernder April",    "Arnim,Elisabeth v.",  1992];
buecher[4] = ["Die Reisegesellschaft", "Arnim,Elisabeth v.",  2008];

Der Zugriff auf die Elemente des Arrays erfolgt durch eine mehrfache eckige Klammer: buecher[0][0] ("Eine kurze Geschichte") ist das erste Element der ersten Zeile und buecher[4][2] (2008) ist das dritte Element der fünften Zeile.

Array-Methoden für multidimensionale Arrays

Da multidimensionale Arrays einfach nur Arrays von Arrays sind, gelten den normalen Methoden von Arrays wie push, pop, splice.

Ein neues Element hinzufügen mit array.push:

buecher.push(["Wildwechsel", "Clement, Pierre", 1988]);

Ein weiteres Element nach dem ersten Element (Index 1) mit array.splice() einfügen

buecher.splice(1, 0, ["Alice hinter den Spiegeln", "Carroll, Lewis", 1872]);

Das vierte Element des Arrays mit array.splice() löschen:

buecher.splice(4,1);

array.sort() scheut auch vor zweidimensionalen Arrays nicht zurück. Alphabetisch nach Titel oder numerisch nach dem Erscheinungsjahr:

buecher.sort(sortMulti);

function sortMulti ( a, b ) {
    if (a[0] === b[0]) {
        return 0;
    }
    else {
        return (a[0] < b[0]) ? -1 : 1;
    }
}

Um das Array nach dem dritten Element – dem Erscheinungsjahr – zu sortieren, a[0] durch a[2] und b[0] durch b[2] ersetzen.

Iteration: Mehrdimensionale Arrays durchlaufen

Javascript hat keine Syntax zum Erzeugen von mehrdimensionalen Arrays. Der typische Weg beim Erzeugen eines mehrdimensionalen Arrays ist eine verschachtelte for-Schleife.

Eine häufige Anwendung von multidimensionalen Arrays ist die Umsetzung von MySQL-Abfragen aus einer PHP-Anwendung in eine HTML-Struktur. So z.B. könnten die Daten von einer PHP-Anwendung geliefert werden:

[
	["Eine kurze Geschichte von fast allem","Bryson, Bill","2003"],
	["Accidental Empires","Cringely, Robert X.","1992"],
	["Arm und Reich","Diamond, Jared","1997"],
	["Bezaubernder April","Elisabeth v. Armin","1992"],
	["Die Reisegesellschaft","Elisabeth v. Armin","2008"]
]

Javascript liest die Daten mit fetch (url, …) Zeile für Zeile und dann die Elemente der Zeilen.

function tabledata (data) {
	let rows = JSON.parse(data);
	const table = document.createElement ("table");
	
	for (const item of rows) {
		const tr = document.createElement ("tr");
		for (const cell of item) {
			let td = document.createElement ("td");
			td.innerHTML = cell;
			tr.append (td)
		}
		table.append (tr)
	}
	document.querySelector (".result").append (table)
}
fetch('table.php', {
        method: "POST",
        header: {"Content-type": "application/json; charset=UTF-8"},
    })
    .then(resp => resp.text())
    .then(data => tabledata (data));