Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Creating two dimensional array in javascript

Suggested Videos
Part 20 - JavaScript array push and pop methods
Part 21 - JavaScript array mutators
Part 22 - JavaScript array filter method



JavaScript does not have a special syntax for creating multidimensional arrays. Instead we create an array of arrays.



Example : The following JavaScript code creates a 2 dimensional 3x3 array.

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)
    myArray1[i] = new Array(3)

myArray1[0][0] = "1"
myArray1[0][1] = "2"
myArray1[0][2] = "3"

myArray1[1][0] = "4"
myArray1[1][1] = "5"
myArray1[1][2] = "6"

myArray1[2][0] = "7"
myArray1[2][1] = "8"
myArray1[2][2] = "9"

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        document.write(myArray1[i][j] + "&emsp;");
    }
    document.write("<br/>");
}

Output : 
2 dimensional array javascript

In Example 1, we have manually populated each storage location in the array. Instead we can use to 2 nested for loops as shown below.

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)
    myArray1[i] = new Array(3)

var start = 1;

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        myArray1[i][j] = start;
        start = start + 1;
    }
}

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        document.write(myArray1[i][j] + "&emsp;");
    }
    document.write("<br/>");
}

Performing addition between 2 two dimensional arrays in JavaScript 

Example : 
a) The first 3 x 3 array should contain numbers from 1 to 9
b) The second 3 x 3 array should contain numbers from 9 to 1
c) The numbers present at each index position in the first and second array should be added and the result should be stored in a third 3x3 array.

javascript to add 2 two dimensional arrays

// Create the first 2 dimensional 3 X 3 array
var myArray1 = new Array(3)

for (i = 0; i < 3; i++)
    myArray1[i] = new Array(3)

var start = 1;

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        myArray1[i][j] = start;
        start = start + 1;
    }
}

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        document.write(myArray1[i][j] + "&emsp;");
    }
    document.write("<br/>");
}

document.write("<br/>");
document.write("&emsp;+");
document.write("<br/>");
document.write("<br/>");

// Create the second 2 dimensional 3 X 3 array
var myArray2 = new Array(3)

for (i = 0; i < 3; i++)
    myArray2[i] = new Array(3)

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        start = start - 1;
        myArray2[i][j] = start;
    }
}

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        document.write(myArray2[i][j] + "&emsp;");
    }
    document.write("<br/>");
}

document.write("<br/>");
document.write("&emsp;=");
document.write("<br/>");
document.write("<br/>");

// Create the third 2 dimensional 3 X 3 array
var myArray3 = new Array(3)

for (i = 0; i < 3; i++)
    myArray3[i] = new Array(3)

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        myArray3[i][j] = myArray1[i][j] + myArray2[i][j];
    }
}

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        document.write(myArray3[i][j] + "&emsp;");
    }
    document.write("<br/>");
}

Creating a 2 dimensional 3 X 5 array

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)
    myArray1[i] = new Array(5)

var start = 101;

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 5; j++)
    {
        myArray1[i][j] = start;
        start = start + 1;
    }
}

for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 5; j++)
    {
        document.write(myArray1[i][j] + "&emsp;");
    }
    document.write("<br/>");
}

Output : 
two dimensional array javascript example

JavaScript tutorial

No comments:

Post a Comment

It would be great if you can help share these free resources