Adding an object to a multidimensional array in JavaScript

Question

I have a tile object declared as follows:

var tile = {
    x: 0,
    y: 0,
    w: canvas.width / numoftiles,
    h: canvas.width / numoftiles,
    color: "#FFFFFF"
};

I have a multidimensional array to store a number of these tile objects, which I declare like so:

var tiles = [[]];

I loop through the length of my canvas adding these tiles to fill the screen like so:

for (i = 0; i < (canvas.height / numoftiles); i++) {
    for (j = 0; j < (canvas.width / numoftiles); j++) {
        tiles[i][j] = new tile();
    }
}

My error occurs on the line:

tiles[i][j] = new tile();

The JavaScript console returns "Uncaught TypeError: tile is not a constructor"

How can I insert tile objects to a specific location in my multidimensional array?

tiles[i][j] = {};

o4ohel
– o4ohel

2016-12-24 00:43:07 +00:00
Commented Dec 24, 2016 at 0:43 — o4ohel
– o4ohel, Commented Dec 24, 2016 at 0:43

HySoaKa · Accepted Answer · 2016-12-24 00:49:14Z

1

You need to define an object constructor, and then create objects of the constructed type:

function Tile() {
  this.x = 0;
  this.y = 0;
  this.w = canvas.width / numoftiles;
  this.h = canvas.width / numoftiles;
  this.color = "#FFFFFF";
}

Now you can use:

var tile = new Tile();

answered Dec 24, 2016 at 0:49

HySoaKa

565 bronze badges

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

Comments

Barmar · Accepted Answer · 2016-12-24 00:48:14Z

1

When you do:

var tiles = [[]];

you've only created tiles[0]. In order to assign to tiles[i][j], tiles[i] has to be an array, but it doesn't exist for any i other than 0. You need to create the sub-arrays in your loop.

As for the error you're getting, that's because tile is just an object, not a constructor function. If you haven't defined a constructor, just assign the object literal in the loop.

var tiles = [];
for (i = 0; i < (canvas.height / numoftiles); i++) {
    tiles[i] = [];
    for (j = 0; j < (canvas.width / numoftiles); j++) {
        tiles[i][j] = {
            x: 0,
            y: 0,
            w: canvas.width / numoftiles,
            h: canvas.width / numoftiles,
            color: "#FFFFFF"
        };
    }
}

edited Dec 24, 2016 at 0:48

answered Dec 24, 2016 at 0:45

Barmar

789k57 gold badges554 silver badges669 bronze badges

2 Comments

user163505 Over a year ago

My error still persists using this solution. The JavaScript console still returns that tile is not a constructor.

Barmar Over a year ago

I've added that to the answer.

Community · Accepted Answer · 2017-05-23 12:16:25Z

0

tile is an object literal, you can not use the operator new on it.

new operator can only be used if you have a constructor function.

This SO has good explanation about how to clone objects:

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Dec 24, 2016 at 0:48

Klinger

4,9701 gold badge32 silver badges35 bronze badges

Collectives™ on Stack Overflow

Adding an object to a multidimensional array in JavaScript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related