Mohamed Sobhy
Jan 30, 2018

Welcome to our tutorial, now I am going to explain how to create javascript multidimensional array with an example.

protect your javascript code

By the end of this tutorial you will be aware of:

What is a Javascript Multidimensional Array ?

Multidimensional array in JavaScript is a parent array that contains children elements of other arrays. As the child array contains further arrays, the dimensional order increases which means that the parent array can store multidimensional data of anything like tables, graphics, motion and so on.

How to Create Javascript Multidimensional Array ?


To create a multidimensional array in JavaScript, just set arrays inside other arrays.
var arrayname = Array(
Array('a0', 'b0', 'c0'),
Array('a1', 'b1', 'c1'),
Array('a2', 'b2', 'c2'));

How to Get Value by Keys in a Javascript Multidimensional Array ?


To get a specific element of the above multidimensional array, you can directly get any element within this array using keys in square brackets, as follows:
//remember that array indexes start at 0, not 1

document.write(arrayname[0][0]);
//in this case outputting the value "a0"

document.write(arrayname[1][2]);
//in this case outputting the value “c1”

The order of keys in square brackets access the parent multidimensional array in the same order. As, in case of "arrayname[1][2]", the key "[1]" points to element "Array('a1', 'b1', 'c1')" inside the parent array, then the key "[2]" points to element of "c1" inside the previous element of child array.

Example on a Javascript Multidimensional Array


Next example shows how you might create an array to store the details of a two-dimensional table for fruits' seller (3×3 squares).
<script>
//Creating and displaying a multidimensional array

//Each element in the next array is a row with column heads of fruit name, kilograms, total sold

var sales_of_fruits = Array(
Array('banana', 2, 20),
Array('apple', 1, 20),
Array('mango', 3, 60));
document.write("fruit name, kilograms, total sold");
for (j = 0 ; j < 3 ; ++j)
{
//next loop contains a single statement, where curly braces are not required to enclose it

for (k = 0 ; k < 3 ; ++k)
document.write(sales_of_fruits[j][k] + ", ");
//any lower statements will run after the above in the outer loop, where curly braces enclose them

document.write("<br />");
}
</script>

In this example, a double of nested "for loops" walk through the array and display its contents. The inner loop then processes each child array in a row, outputting the element at position [j][k], followed by a "comma space" (to table the printout).

The result of running the example script in a browser is as follows:
fruit name, kilograms, total sold
banana, 2, 20
red, 1, 20
mango, 3, 60

Also, you can directly get any element within this array using square brackets, as follows:
document.write("Total kilograms of mango is " + sales_of_fruits[2][2]);
//This statement outputs "Total kilograms of mango is 60"

Try WhiteBoxes JavaScript Obfuscator >>

Thank you for reading the above article. Please let us know your comments below.

References:
  • Practical Experience
About the author

Mohamed Sobhy

Mohamed is a freelance web designer, recreational software developer, author and CEO of infoapper.com . Also, has passion to learn and transfer the know-how of every valuable thing.
Views: 1454
0 Comment Guest
Recommend 0
Sort by Newest
Be the first to say something...

Ask Community

Ask questions and Share knowledge with Community

Find below recent posts for automation solutions with questions and answers by community. You can search in past threads or post new question about your assignment with detailed description, and always could mark your question as request. Sharing knowledge are highly appreciated by answering on others questions, and in return awards will be decided.

× Close
Results: