Mehrdimensionale Arrays

Mehrdimensionale Arrays, ist ein Thema, das mir sehr am Herzen liegt. Bis jetzt hatten wir schon sehr viele Möglichkeiten um schön zu arbeiten. Aber jetzt müssen wir ein bisschen in die Tiefe gehen. Das hört sich schlimmer an als es ist. Aber sehen wir uns das Beispiel an:

Ich benötige Eine Liste für Obst, Trinken und Backwaren:
  • Obst
    • Apfel
    • Orange
    • Banane
  • Drinks
    • Mineralwasser
    • Limo
    • Bier
  • Backwaren
    • Brezel
    • Laugenstange
    • Brot
Obst, Drinks und Backwaren stellen hier die erste Dimension dar, die jeweils darunterliegenden Einträge, die zweite Dimension.
Also benötigen wir für Obst, Drinks und Backwaren jeweils ein Array.
Schritt 1:
const verpflegung = new Array;
verpflegung[ 'Obst' ] = new Array;
verpflegung[ 'Drinks' ] = new Array;
verpflegung[ 'Backwaren' ] = new Array;

Schritt 2:
verpflegung[ 'Obst' ][ 0 ] = 'Apfel';
verpflegung[ 'Obst' ][ 1 ] = 'Orange';
verpflegung[ 'Obst' ][ 2 ] = 'Banane';
//--
verpflegung[ 'Drinks' ][ 0 ] = 'Mineralwasser';
verpflegung[ 'Drinks' ][ 1 ] = 'Limo';
verpflegung[ 'Drinks' ][ 2 ] = 'Bier';
//--
verpflegung[ 'Backwaren' ][ 0 ] = 'Brezel';
verpflegung[ 'Backwaren' ][ 1 ] = 'Laugenstange';
verpflegung[ 'Backwaren' ][ 2 ] = 'Brot';
Jetzt müssen wir nur noch die Arrays auslesen.
Das müssen wir über eine verschachtelte Schleife erledigen (also Schleife in Schleife):
// i == index von verpflegung
for(let i in verpflegung){
  // j == der Index der zweiten Dimmension
  for(let j = 0; j < verpflegung[ i ].length; j++){
    alert('Verplegung für: ' + i +' | ist: ' + verpflegung[ i ][ j ]);
  }
}
Aber das ganze geht noch einen Schritt weiter:
Schritt 3:
const verpflegung = new Array;
verpflegung[ 'Obst' ] = new Array;
verpflegung[ 'Obst' ][ 'weintrauben' ] = new Array;
verpflegung[ 'Obst' ][ 'weintrauben' ][ 0 ] = 'Mit Kerne';
verpflegung[ 'Obst' ][ 'weintrauben' ][ 1 ] = 'Ohne Kerne';

Oder Schritt 4:
const verpflegung = new Array;
verpflegung[ 'Obst' ] = new Array;
verpflegung[ 'Obst' ][ 'weintrauben' ] = new Array;
verpflegung[ 'Obst' ][ 'weintrauben' ][ 'rot' ] = new Array;
verpflegung[ 'Obst' ][ 'weintrauben' ][ 'rot' ][ 0 ] = 'Mit Kerne';
verpflegung[ 'Obst' ][ 'weintrauben' ][ 'rot' ][ 1 ] = 'Ohne Kerne';

Jetzt könnt Ihr euch die Möglichkeiten vorstellen.

Wenn Ihr Anregungen oder Kommentare zu den Thema habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Beispiel

Testen


Code 

HTML:

<div class="target"></div>
<p>
	<a href="javascript:getMoreArrays()">Testen</a>
</p>






CSS:







JavaScript:

const verpflegung 			= new Array;
verpflegung[ 'Obst' ] 		= new Array;
verpflegung[ 'Drinks' ] 		= new Array;
verpflegung[ 'Backwaren' ] 	= new Array;
//--
verpflegung[ 'Obst' ][0] = 'Apfel';
verpflegung[ 'Obst' ][1] = 'Orange';
verpflegung[ 'Obst' ][2] = 'Banane';
//--
verpflegung[ 'Drinks' ][0] = 'Mineralwasser';
verpflegung[ 'Drinks' ][1] = 'Limo';
verpflegung[ 'Drinks' ][2] = 'Bier';
//--
verpflegung[ 'Backwaren' ][0] = 'Brezel';
verpflegung[ 'Backwaren' ][1] = 'Laugenstange';
verpflegung[ 'Backwaren' ][2] = 'Brot';

function getMoreArrays(){
	
	let myList = '<ul>';
	
	// i == index von verpflegung
	for(let i in verpflegung){
		
		myList += '<li>' + i + '</li>';
		
		// j == der Index der zweiten Dimmension
		for(let j = 0; j < verpflegung[ i ].length; j++){
			if(j == 0){
				myList += '<ul>';
			}
			myList += '<li>'+verpflegung[ i ][ j ]+'</li>';
			
			// von verpflegung[i].length muss 1 abgezogen werden
			if( j == (verpflegung[i].length-1) ){
				myList += '</ul>';
			}
		}
	}
	myList += '</ul>'; 
	document.querySelector('.target').innerHTML = myList;
}