2D Javascript Array TypeError

Question

[EDIT] Full application available at: http://bit.ly/1CGZzym

I'm receiving the error:

Uncaught TypeError: Cannot set property '0' of undefined

with the following code. I believe it is due to my not declaring the child array of the 2D array properly but I am really confused as to where I should be declaring this. Any ideas would be excellent.

// Create an array for the tiles we're about to draw
var tileArray = []

is declared out side of the function.

I assume it is because I am trying to create child elements within each [col] so I guess I need to declare each col number somewhere but nothing I attempt seems to be working.

function drawGrid()
        {

            // Draw diamond grid

            var col = 0;
            var row = 0;

            topTileX = (viewWidth/2);
            topTileY = 0;

            var nextX = 0;
            var nextY = 0;

            var getCols = 0;

            while (topTileX > -1)
            {

                tileArray[col][row] = new DiamondTile(topTileX, topTileY, tileWidth, true, col, row);
                tileArray[col][row].draw();

                while (tileArray[col][row].xPos + tileArray[col][row].tileWidth < (viewWidth) + tileWidth)
                {
                    col++;

                    nextX = tileArray[col-1][row].xPos + tileArray[col-1][row].tileWidth / 2;
                    nextY = tileArray[col-1][row].yPos + tileArray[col-1][row].tileHeight / 2;

                    tileArray[col][row] = new DiamondTile(nextX, nextY, tileWidth, true, col, row);
                    tileArray[col][row].draw();

                    if (col == getCols)
                            {
                                break;
                            }
                }

            row++;
            getCols = col;
            col = 0;

            topTileX = topTileX - tileWidth/2;
            topTileY = topTileY + tileHeight/2;

            }
        };

For the purpose of demonstration, the DiamondTile function is as follows:

function DiamondTile(xPos,yPos,width,interactive,myCol,myRow)
        {
            // Set x and y position for this sprite
            this.xPos = xPos;
            this.yPos = yPos;
            this.myRow = myRow;
            this.myCol = myCol;

            // Used for AI pathfinding
            this.isObstacle = false;
            this.isStart = false;
            this.isEnd = false;

            this.gValue = 0;
            this.hValue = 0;
            this.fCost = 0;

            this.tileWidth = width;
            this.tileHeight = this.tileWidth/2;

            var self = this;

            // Create sprite
            this.spriteObj = new PIXI.Sprite(grass);
            this.spriteObj.interactive = interactive;

            this.spriteObj.anchor = new PIXI.Point(0.5,0);

            this.spriteObj.hitArea = new PIXI.Polygon([
                new PIXI.Point(0,0),
                new PIXI.Point(100,50),
                new PIXI.Point(0,100),
                new PIXI.Point(-100,50)
                ]);

            this.spriteObj.mouseover = function()
            {
                if (self.spriteObj.tint == 0xFFFFFF)
                {
                self.spriteObj.tint = 0xA7E846;
                }

                text2.setText(self.myCol + "," + self.myRow + " Start: " + self.isStart);
            }
            this.spriteObj.mouseout = function()
            {
                if (self.spriteObj.tint == 0xA7E846)
                {
                self.spriteObj.tint = 0xFFFFFF;
                }
            }
            this.spriteObj.click = function()
            {
                if (startStage === true)
                {
                    startStage = false;
                    self.isStart = true;
                    self.spriteObj.tint = 0x1AFF00;
                    text.setText("Now select an end point");
                    endStage = true;
                    return true;
                }
                if (endStage === true)
                {
                    endStage = false;
                    self.isEnd = true;
                    self.spriteObj.tint = 0xFF0000;
                    text.setText("Now place some obstacles");
                    obsStage = true;
                    return true;
                }
                if (obsStage ===true)
                {
                    self.isObstacle = true;
                    self.spriteObj.tint = 0x3B3B3B;
                    text.setText("Press 'C' to calculate path");
                    return true;
                }

            }


        };

As a global variable. It needs to be accessible by all functions. — Jordan
– Jordan, Commented Jan 30, 2015 at 12:33
I was actually wondering how you were creating it, as per the answers below. — Evan Knowles
– Evan Knowles, Commented Jan 30, 2015 at 12:36
All I have elsewhere is // Create an array for the tiles we're about to draw var tileArray = []; — Jordan
– Jordan, Commented Jan 30, 2015 at 12:45

Faris Zacina · Accepted Answer · 2015-01-30 16:08:58Z

2

That is a multi-dimensional array and you have not initialized the first dimension array correctly. In the while loop you have to initialize the first dimension to be able to access a second dimension element with an index:

while (topTileX > -1)
{
    if (tileArray[col] == null)
        tileArray[col] = [];

    tileArray[col][row] = new DiamondTile(topTileX, topTileY, tileWidth, true, col, row);
    tileArray[col][row].draw();

    // omitted other code for brevity
}

Javascript arrays are dynamic and it's enough to initialize the first dimension array elements in this case. You don't have to initialize the individual items in the second dimension.

Update: here is a fiddle with working code http://jsfiddle.net/0qbq0fts/2/

In addition your semantics is wrong. By the book, the first dimension of a 2-dimensional array should be rows, and the second dimension should be columns.

edited Jan 30, 2015 at 16:08

answered Jan 30, 2015 at 12:01

Faris Zacina

14.3k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jordan Over a year ago

Thanks. This all would seem to make sense but, for some reason. The error is still being thrown. You're absolutely right re: the col/row order. I'll get that sorted. The error gets thrown on the line: tileArray[col][row] = new DiamondTile(nextX, nextY, tileWidth, true, col, row);. Despite having added your code to initialize the child array. Having set some breakpoints, it's occurring on the first iteration.

Faris Zacina Over a year ago

Maybe the problem is in the DiamondTile constructor. Can you share that code as well?

Jordan Over a year ago

Done. I've added it to the main question.

Faris Zacina Over a year ago

I added a jsFiddle to my response. The code in the While loop runs fine, so the problem is definitely elsewhere.

Faris Zacina Over a year ago

You should add the same check and initialization code from my response before accessing tileArray in the second loop because inside it you are incrementing the col variable.

|

Alnitak · Accepted Answer · 2015-01-30 13:42:14Z

1

You have to explicit create the elements representing the second dimension, e.g.:

function make2DArray(rows, cols) {
    var r = Array(rows);
    for (var i = 0; i < rows; ++i) {
        r[i] = Array(cols);
    }
    return r;
}

If you don't know in advance how many columns, just use this:

function make2DArray(rows) {
    var r = Array(rows);
    for (var i = 0; i < rows; ++i) {
        r[i] = [];
    }
    return r;
}

The individual rows can each have independent lengths, and will grow as you add values to them.

Similarly, if you just need to add a new (empty) row, you can just do:

tileArray.push([]);

edited Jan 30, 2015 at 13:42

answered Jan 30, 2015 at 11:53

Alnitak

341k72 gold badges420 silver badges503 bronze badges

2 Comments

Jordan Over a year ago

Alnitak - thanks for this. However, unless I have misunderstood - your code would require a preexisting knowledge of how many rows and columns to create. Unfortunately, we don't know how many columns to create until the last column in the first row has been rendered. Equally, we don't know how many rows to create until the first column of the last row has been rendered. In that sense, I cannot declare in advance how many elements each dimension should have. That said, the answer is useful as a means of explaining the cause of the issue. Thanks.

Alnitak Over a year ago

@JordanDolan see update. ultimately the important bit is that each new row entry must itself be a 1D array, and you can keep adding those.

JMP · Accepted Answer · 2015-01-30 12:49:45Z

0

This should probably me a comment, but SO has crashed on my side. JavaScript might be throwing an exception on your stated line, but the problem may be with the 'DiamondTile' function.

answered Jan 30, 2015 at 12:49

JMP

4,62117 gold badges34 silver badges44 bronze badges

Collectives™ on Stack Overflow

2D Javascript Array TypeError

3 Answers 3

12 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related