Mehrdimensionale Arrays

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