Build a multi-dimensional array in JavaScript
It's as simple as nesting some for loops
By: Ajdin Imsirovic 18 January 2021
How to build matrices in JS? Also known as multi-dimensional arrays, these are just arrays of arrays in JS. An easy way to build multi-dimensional arrays is to output them using nested loops, as we’ll show in this tutorial.
In JS, a multi-dimensional array is an array of arrays (of arrays etc…).
Here’s a simple two-dimensional matrix:
-------------
| 100 | 200 |
-------------
| 30 | 25 |
-------------How do we build this in JS? And how do we access the members of this matrix?
To build it, we do this:
let tda = [];
tda.push([100,200]);
tda.push([30, 25]);
tda;
/*
returns:
(2) [Array(2), Array(2)]
0: (2) [100, 200]
1: (2) [30, 25]
*/In the above array of arrays, each member (which is also an array), represents a row in the two-dimensional matrix.
To access any specific “cell” in the matrix, we use the following syntax:
tda[0][0]; // 100To get back the value of 100 from row 1, position 1 of the matrix, we call tdm[0][0]. Or we might say row 0, position 0, if we’re counting the values like arrays count them, not like humans count them.
Let’s get out all the members of the two-dimensional array:
tdm[0][0]; // 100
tdm[0][1]; // 200
tdm[1][0]; // 30
tdm[1][1]; // 25We could run a for loop to get out these values, or a forEach as well.
This goes back to our exercise on building a multiplication table. Here’s a reimplementation using document.write. We begin by adding a table element to the DOM:
document.write("<table>");We haven’t closed the table element yet; that comes at the end of this code snippet.
Now we’ll add two loops:
1
2
3
4
5
6
7
8
9
document.write("<table style='border: 1px solid'>");
for (let row = 1; row < 11; row++) {
document.write("<tr>");
for (let cell = 1; cell < 11; cell++) {
document.write("<td style='border:1px solid'>" + row * cell + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
Unfortunately, the document.write() method is quirky, or at least, acts somewhat unexpectedly. That’s why, although it looks like a nice trick, we’re much better off relying on the document.createElement() and document.body.appendChild() APIs.
Here’s our two-dimensional JavaScript array again, this time using the above mentioned methods:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let table = document.createElement("table");
for (r = 0; r < 10; r++) {
let row = document.createElement("tr");
for (c = 0; c < 10; c++) {
let col = document.createElement('td');
col.textContent = (r + 1) * (c + 1);
row.appendChild(col);
}
table.appendChild(row);
}
document.body.textContent = "";
document.body.appendChild(table);
Now let’s improve our table with some additional styles:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.body.textContent = "";
let table = document.createElement("table");
table.setAttribute("style", "font-size: 24px; border: 1px solid");
for (r = 0; r < 10; r++) {
let row = document.createElement("tr");
for (c = 0; c < 10; c++) {
let col = document.createElement('td');
col.setAttribute("style", `
padding: 5px;
border: 1px solid;
text-align: center;
font-family: Arial, sans-serif;
`);
col.textContent = (r + 1) * (c + 1);
row.appendChild(col);
}
table.appendChild(row);
}
document.body.appendChild(table);
Note:
This exercise comes from Book 3
of my book series on JS, available on Leanpub.com.
