JavaScript : Multidimensional Arrays or Arrays of Arrays

JavaScript itself does not have multidimensional arrays, instead you can use an arrays of arrays instead.  Multidimensional arrays are basically arrays that you can reference by rows and columns.  The most obvious real world use is to store rows and columns of a database record.  Imagine if you have a row of the database product from the database from the table "Products".  Instead of storing each value in an individual variable you can store them in an arrays of arrays.

Let's say you have the following database Products table









This is a perfect scenario to use an arrays of arrays in JavaScript.

Here is how you would store the records, let's ignore the column headers and just concentrate on the record rows and columns.



So before we start coding we will go into how the arrays will store the values in each rows and columns.

We are used to using single dimensional arrays that looks like this products[0], the problem with this way of defining the array is that there's no mechanism to access a specific row and column.

Instead what we want to do is store the values with an index of rows of columns like this products[0][0].  By defining the array with two indexes we know exactly what array indexes we are accessing.  So products[0][0] will have the value of "ACME Coffee" because we access the array with the index of row 0 and column 0, which are a basically row 1 and column 1 in the database because JavaScript arrays starts with index of 0.

Type in the code below to define an arrays of arrays of products

    
<script>
        var products = new Array(2);

        for (var i = 0; i < products.length; i++) {
            products[i] = new Array(5);
        }

        products[0][0] = "ACME Coffee";
        products[0][1] = 12.00;
        products[0][2] = "Dark Roast";
        products[0][3] = "ACME Big Box";
        products[0][4] = 10;

        products[1][0] = "ACME Spinner";
        products[1][1] = 19.99;
        products[1][2] = "Spins a lot";
        products[1][3] = "ACME Big Box";
        products[1][4] = 100;
</script>

Now if we want to access the array on row 2 and column 1 which has the value of "ACME Spinner"
we would type products[1][0].  If we write to the console it would be

console.log(products[1][0]);

And if we display the products in the console with the code

        console.log(products);

We will see that the array has two rows and five columns












Most of the time we want to iterate through the arrays of arrays and get the all the values.  So how would we do that?

Well the answer is that we have to use a nested for loop to loop through the rows and columns like the code below.

        for (var row = 0; row < products.length; row++)
            for (var col = 0; col < products[row].length; col++)
                console.log(products[row][col]);

The preceding code uses the outer for loop to loop through the row, and uses the inner for loop to loop through the columns, by using the length as the exiting condition for both loops.  The resulting output looks like the following in the browser console.