Mehrdimensionale Arrays – Array of Array

keine Syntax für mehrdimensionale multidimensional Arrays

Pedantisch gesehen gibt es keine mehrdimensionalen Arrays in Javascript. Was aber möglich ist, sind Arrays, deren Elemente selber wieder Arrays sind. Arrays können jede Art von Datentyp speichern – darunter auch wieder Arrays.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

Array (3) 0 > [1,"DE","Hallo"] (3) 1 > [3,"IT","buongiorno"] (3) 2 > [5,"FR","bonjour"] (3)

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));