Javascript Array or indices undefined

Question

I am building a web app which contains a DOM table. This is my code that should create a table from an array:

function create_table() {
    var tablediv=document.getElementById('icon-table');
    var table = document.createElement("table");
    var grid = [[15][15]];
    var template = "pixel-{1}-{2}";
    table.className = "icon-table";
    tablediv.appendChild(table);
    for (var i = 0; i < 16; i++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var j = 0; j < 16; j++) {
            var td = document.createElement("td");
            td.className = "icon-pixel";
            td.id="pixel-"+ i + "-" + j;
            td.style.backgroundColor = "rgb(255,255,255)"; // no dash - css attribute name becomes camelCase
            grid[i][j] = td;
            td.addEventListener("click", setpixel)
            td.addEventListener("mousedown", pinselpixel)
            tr.appendChild(td);
        }
    }
}

The assignment grid[i][j] = td; fails during the first loop iteration. On the console in my browser the output says:

TypeError: undefined is not an object (evaluating 'grid[i][j] = td')

what am I missing?

I think var grid = [[15][15]]; is wrong , it gives you an array of length 1 containing undefined — simbathesailor, Nov 30 '17 at 12:05
`[15][15]` is the same as an array with one item (the number `15`) and then taking the 16th item from the array (which doesn't exist, hence is undefined). `var foo = []; foo.push(15); foo[15]`. — h2ooooooo, Nov 30 '17 at 12:07
Possible duplicate of [How can I create a two dimensional array in JavaScript?](https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript) — Tobi Obeck, Nov 30 '17 at 13:12

score 3 · Answer 1 · answered Nov 30 '17 at 12:13

you are trying to loop over an array of array which has 2 elements inside. Each element is (like i said) an array, with a single entry - in your case 15.

Afterwards you are trying to iterate from 0 up to 15.

So your iterations should at first loop over grid array and afterwards over grid's elements up to their length.

but in my opinion it is not necessary to loop over an array here. just do the following:

var myGrid = []
for (var i = 0; i < 16; i++) {
  for var k = 0; k < 16; k++) {
    //do your stuff
    myGrid[i][k] = td
  }
}

this should work

score 3 · Accepted Answer · answered Nov 30 '17 at 12:16

There's a couple of problems here. First, you seem to be under the impression that

[[15],[15]]

will create an an array with two sub-arrays, each with 15 keys.

Instead, what that actually gives you is an array with two sub-arrays each containing one key each, with the value 15.

You probably meant this:

[new Array(15), new Array(15)]

Passing an integer to the array constructor creates the slots; passing it to an array literal simply adds that value to the array.

Even then, this approach isn't ideal. Yes, you're containing 15 (actually you presumably meant 16) slots, but they're just undefined slots right now, so this line will fail, since you can't treat undefined as an array:

grid[i][j] = td; //grid[i] == undefined, not an array

Better this (truncated for brevity):

   for (var i = 0; i < 16; i++) {
        grid[i] = []; //<-- create the row array in the loop
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var j = 0; j < 16; j++) {
            var td = document.createElement("td");
            grid[i][j] = td; //<-- now we can append the column cell
            tr.appendChild(td);
        }
    }

score 1 · Answer 3 · answered Nov 30 '17 at 12:14

The method of intializing the two dimensional array is wrong.

Please use the below method to initialize.

var grid = new Array(15);
for (var i = 0; i < 16; i++) {
  grid[i] = new Array(15);
}

First we create the rows of the array (15 rows), then using a for loop we initialize 15 columns for each row. Then the code works fine!

function create_table() {
    var tablediv=document.getElementById('icon-table');
    var table = document.createElement("table");
    var grid = new Array(15);
    for (var i = 0; i < 16; i++) {
      grid[i] = new Array(15);
    }
    var template = "pixel-{1}-{2}";
    table.className = "icon-table";
    tablediv.appendChild(table);
    for (var i = 0; i < 16; i++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var j = 0; j < 16; j++) {
            var td = document.createElement("td");
            td.className = "icon-pixel";
            td.id="pixel-"+ i + "-" + j;
            td.style.backgroundColor = "rgb(255,255,255)"; // no dash - css attribute name becomes camelCase
            grid[i][j] = td;
            td.addEventListener("click", function(){console.log("clicked");})
            td.addEventListener("mousedown", function(){console.log("mousedown");})
            tr.appendChild(td);
        }
    }
}
create_table();

<div id="icon-table"></div>

score 1 · Answer 4 · answered Nov 30 '17 at 12:16

Your grid initialization is wrong. As mentioned by some comments:

var grid = [[15][15]];

is equivalent to:

const arr = [15]; // array with one element, 15
var grid = arr[15]; // 16th element, which doesn't exist

You probably instead want:

var grid = new Array(15).fill(new Array(15));

Which will give you a two-dimensional array that is 15 "wide" and 15 "tall".

That said, you really don't need to prefill your grid unless it is a requirement for some other reason (like you are printing out a chessboard or something that always has a fixed size).

score 1 · Answer 5 · answered Nov 30 '17 at 13:10

1

Can change to this and try it?

var grid = [[15][15]];

to

var grid = [new Array(15), new Array(15)];

answered Nov 30 '17 at 13:10

KHACHORNCHIT

2,222
23
19

Javascript Array or indices undefined

5 Answers5