Multi-dimensional Arrays

Multi-dimensional Arrays

We have now looked at single dimensional arrays. One of the arrays contained cartoon characters. What if we wanted to also store information about each of the cartoon characters. We could use a multi-dimensional Array

	var character_array = new Array();
	character_array[0] = new Array();
	character_array[0][0] = "Goofy";  	
	character_array[0][1] = "Tall Hat";  	
	character_array[0][2] = "Drives a Car";  	

	character_array[1] = new Array();	
	character_array[1][0] = "Pluto";  	
	character_array[1][1] = "Dog Collar";  	
	character_array[1][2] = "Floppy Ears"; 
	character_array[1][2] = "has fleas";  	

	character_array[2] = new Array();		
	character_array[2][0] = "Mickey"; 		
	character_array[2][1] = "Long Tail";  	
	character_array[2][2] = "Round Ears";  	
	
	document.write("Character : " + character_array[0][0] );
	document.write("Character Type : " + character_array[0][1]);
	document.write("Character info: " + character_array[0][2] );
	
	document.write("Character : " + character_array[1][0] );
	document.write("Character Type : " + character_array[1][1]);
	document.write("Character info: " + character_array[1][2] );
	
	document.write("Character : " + character_array[2][0] );
	document.write("Character Type : " + character_array[2][1] );
	document.write("Character info: " + character_array[2][2]);

click here to see the demo.

Debugging a multi-dimensional array
Notice when we declared the first element of the multi-dimensional array, we put a new array in it, character_array[0] = new Array();. So, if you think about it, you just put a whole array inside one cell. If we display that one cell, document.writeln(character_array[0]); it will display all the data being stored in it. Fortunately, JavaScript seperates each item by a comma!
```
		document.writeln(character_array[0]);
		
		displays the following:
		Goofy,Tall Hat,Drives a Car
	
```
If we use the length property we will find that it gives us just the number of elements at the single dimensional level of the array.
```
	document.write(character_array.length) //prints 3
	
```
We can debug the array just like the single dimensional array;
```
	for (i=0;i<character_array.length;i++)
		document.write(i + " : " + character_array[i]);
	
	
```
You also can find out how many elements are in each single dimension level by using the length property and each element by:

document.write(character_array[0].length) //prints 3
document.write(character_array[1].length) //prints 4
document.write(character_array[2].length) //prints 3
```
var i,j;
for (i=0;i<character_array.length;i++)
  for (j=0;j<character_array[i].length;j++)
    document.write("character_array[" + i + "][" + j + "]:" + character_array[i][j] + "<br>");


	
```
click here to see the demo.
Sorting a multi-dimensional array
An array can be sorted using the sort() method. Notice in the previous example when you dispaly character_array[0], all the elements were displayed with a comma between each.
```
character_array[0] : Goofy,Tall Hat,Drives a Car
character_array[1] : Pluto,Dog Collar,Floppy Ears,has fleas
character_array[2] : Mickey,Long Tail,Round Ears
	
```
When the array is sorted, all the items are taken into account. In this example each of the first items are not equal, so it is easy to see the sort order would be Goofy.., Mickey.., and Pluto..
```
character_array.sort();	
character_array[0] : Goofy,Tall Hat,Drives a Car
character_array[1] : Mickey,Long Tail,Round Ears
character_array[2] : Pluto,Dog Collar,Floppy Ears,has fleas
	
```
Notice how the data physically moved, character_array[1] and character_array[2] have swapped places. To show how the sorting uses all the items, lets add another set if information that is similar.
```
character_array[0] : Goofy,Tall Hat,Drives a Car
character_array[1] : Mickey,Long Tail,Round Ears
character_array[2] : Pluto,Dog Collar,Floppy Ears,has fleas
character_array[3] : Mickey,Long Tail,Black Eyes
	
```
Notice the last element in character_array[3][2] is different. The "B" in Black should come before the "R" in Round. So, the sort() method compares all the elements to sort the array in the correct order.
```
character_array.sort();	
character_array[0] : Goofy,Tall Hat,Drives a Car
character_array[1] : Mickey,Long Tail,Black Eyes
character_array[2] : Mickey,Long Tail,Round Ears
character_array[3] : Pluto,Dog Collar,Floppy Ears,has fleas
	
```
click here to see the demo.