JavaScript is obsolete. Click here to learn more about JavaScript++.

[Back to previous page] [Next Page in Series]

Ken Ward's Java Script Tutorial ...

Two-dimensional Arrays in JavaScript

The following example shows you how a two-dimensional array can be produced in JavaScript. You can enter a value in the box labelled 'Person ID', which is the first number of a two-dimensional array, and then select one of two numbers in the Name/Profession box. Then you need to press the go button to see the results.

For instance, if you choose the number '0' for the Person ID, and Name (0) in the Name/Profession drop down, then you get the name of the person with the ID of '0'. If you choose the Profession (1) option then you get the profession of that person. The first name is 'Tom' and he is a scientist. Therefore:

MultiArray[0][0]=Tom,

And:

MultiArray[0][1]=scientist.

In other words, the two-dimensional array has the above values for its first item. The example is next, and after that, I give the code.

Person ID:

Name/Profession

Result (Name or Profession)


All the values in the array:

The Head Code

The code in the head part of this document is:

<script type="text/javascript">

<!--//

function CreateMultiArray()

//This function creates and fills the array

{

MultiArray = new Array(5)

MultiArray [0] = new Array(2)

MultiArray [0][0] = "Tom"

MultiArray [0][1] = "scientist"

MultiArray [1] = new Array(2)

MultiArray [1][0] = "Beryl"

MultiArray [1][1] = "engineer"

MultiArray [2] = new Array(2)

MultiArray [2][0] = "Ann"

MultiArray [2][1] = "surgeon"

MultiArray [3] = new Array(2)

MultiArray [3][0] = "Bill"

MultiArray [3][1] = "taxman"

MultiArray [4] = new Array(2)

MultiArray [4][0] = "Myrtal"

MultiArray [4][1] = "bank robber"

}

//This function gets the array value when the form button is pressed

function getArray(row,col){

document.arrayForm.myResult.value=MultiArray[row][col];

}//end of getArray()

// End hiding. -->

</script>

The first function above () is the one that creates and populates the array. Essentially, the array, MultiArray is declared and then new arrays declared for each of the values. That is, first we create the array:

MultiArray = new Array(5)

And then we add the following three elements for each of the values we want in the array:

MultiArray [0] = new Array(2)

MultiArray [0][0] = "Tom"

MultiArray [0][1] = "scientist"

More Elements

The fifth element (number 4) is the highest value. If you want more values, then you can add more of the three units. So if you wanted to have six elements, you would add:

MultiArray [5] = new Array(2)

MultiArray [5][0] = "Charles"

MultiArray [5][1] = "independant means"

You would change the number of elements in the array as follows:

MultiArray = new Array(6)

This reflects the fact that there are now six elements in the array.

Calling the Array Function

In order to use the array, we have to call it somewhere. In this page, it is called in the body:

This is done as shown below by called CreateMultiArray() in some JavaScript tags.

<script type="text/javascript">

<!-- Begin hiding.

/* You need to build the array, so this is essential*/

CreateMultiArray()

//Populate the text area to show the contents of the array

var s='';

for (i=0;i<5; i++) {

for (j=0;j<2; j++) {

s=s+'Array['+i+', '+j+']:= '+'\"'+MultiArray[i][j]+'\" ';

}//end of for i=0;i<n; i++

}//end of for i=0;i<n; i++

document.arrayForm.ta1.value=s;

// End hiding. -->

</script>

The example shows all the values of the array in a text area in the form above. The code which follows CreateMultiArray() is how the text area is populated. In this, we simple call each element and add it to the text area.

You can view an edited version of this page's source to see how the parts of this code work together.