Tabellen als Array
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.
let items = [ [1, "DE", "Hallo"], [3, "IT", "buongiorno"], [5, "FR", "bonjour"] ]; console.log (items);
Die Console zeigt
Als Array-Objekt:
let buecher = new Array(); Titel Autor Jahr 0 Eine kurze Geschichte Bryson, Bill 2003 1 Accidental Empires Cringely, Robert X. 1992 2 Arm und Reich Diamond, Jared 1997 3 Bezaubernder April Elisabeth v. Armin 1992 4 Die Reisegesellschaft Elisabeth v. Armin 2008
Das hier sind sechs Arrays – fünf innere und ein äußeres
buecher[0] = new Array("Eine kurze Geschichte","Bryson, Bill", 2003); buecher[1] = new Array("Accidental Empires","Cringely, Robert X.", 1992); buecher[2] = new Array("Arm und Reich","Diamond, Jared", 1997);
Jedes Element des Arrays buecher ist ein Array aus drei Elementen. Der Zugriff auf die Zellen des Arrays erfolgt durch eine mehrfache eckige Klammer: buecher[0][0] ("Eine kurze Geschichte") ist das erste Element der ersten Zeile und buecher[1][2] (1992) ist das dritte Element der zweiten Zeile.
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.
let iMax = 5; let jMax = 3; let myItems = []; let count = 1; for (let i=0; i<iMax; i++) { myItems[i] = []; for (let j=0; j<jMax; j++) { myItems[i][j] = count; count++; } } console.log("myItems " + myItems); console.log("myItems[3][2] " + myItems[3][2]);
Eine häufige Anwendung von multidimensionalen Arrays ist die Umsetzung von JSON-Daten in eine HTML-Struktur.
So z.B. könnten die JSON-Daten von einer PHP-Anwendung geliefert werden:
{ "list" : [ { "titel": "Eine kurze Geschichte von fast allem", "autor": "Bryson, Bill", "jahr": "2003" }, { "titel": "Accidental Empires", "autor": "Cringely, Robert X.", "jahr": "1992" }, { "titel": "Arm und Reich", "autor": "Diamond, Jared", "jahr": "1997" }, { "titel": "Bezaubernder April", "autor": "Elisabeth v. Armin", "jahr": "1992" } , { "titel": "Die Reisegesellschaft", "autor": "Elisabeth v. Armin", "jahr": "2008" } ] }
Auf den Key verzichten wir.
let xhr = new XMLHttpRequest(); xhr.open ('GET', 'file.json'); xhr.onreadystatechange = function () { if ((xhr.status === 200) && (xhr.readyState === 4)) { let rows = JSON.parse(xhr.responseText); let myArray = []; // In ein Array einlesen for (let i=0; i<= rows.list.length-1; i++) { let z = 0; myArray [i] = []; for (key in rows.list[i]) { if (rows.list[i].hasOwnProperty(key)) { myArray [i][z] = rows.list[i][key]; } z++; } } // Array in HTML-Table let tab = document.querySelector(".tab"); let table = document.createElement("TABLE"); let ml = myArray.length; for (let i=0; i<ml; i++) { let tr = document.createElement("TR"); for (let j=0; j<myArray[i].length; j++) { let td = document.createElement("TD"); td.appendChild(document.createTextNode(myArray[i][j])); tr.appendChild(td); } table.appendChild(tr); } tab.appendChild(table) } } xhr.send();