2 dimensional array of class objects in Javascript

Question

Trying to make an array of class objects in JS. I don't know how Javascript handles this but instead of a 10x10 grid, all numbers are set to 10 instead of the i and j values I want to assign.

class Box {
  constructor(width, height, x, y, inside) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.inside = inside;
  }

  getHeight() {
    return this.height;
  }

  setHeight(newHeight) {
    this.height = newHeight;
  }
  let boxes = [
    []
  ];
  let testBox = new Box(1, 1, 1, 1, "Test")

  for (let i = 0; i < 11; i++) {
    for (let j = 0; j < 11; j++) {
      boxes[i[j]] = new Box(i, j, i, j, "Test");
    }
  }

  console.log(testBox.getHeight()); //Working Example
  console.log(boxes[3[3]].getHeight()); //outputs 10?
  console.log(boxes[4[6]].getHeight()); //outputs 10?

D2 arrays are just arrays within arrays, so you need to access them like this `boxes[3][3]` — Olian04, Jul 08 '18 at 13:09
When working with js, your first instincts when something doesn't work should be to check the console. As you would have seen this time, you get an error. — Olian04, Jul 08 '18 at 13:11
Thanks for the reply. I've been trying that but it leads to the browser complaining "Uncaught TypeError: Cannot read property '3' of undefined". So I was trying [[]] syntax. — John G, Jul 08 '18 at 13:14
Then you're not doing what you think you are--again, the console is your friend. — Dave Newton, Jul 08 '18 at 13:15
No, it does not give an error until I change it to how you suggested to access it. — John G, Jul 08 '18 at 13:16

score 0 · Accepted Answer · answered Jul 08 '18 at 13:15

0

An example of what i wrote about in the comments

class Box {
  constructor(width, height, x, y, inside) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.inside = inside;
  }

  getHeight() {
    return this.height;
  }

  setHeight(newHeight) {
    this.height = newHeight;
  }
}

let boxes = [];

for (let i = 0; i < 11; i++) {
  for (let j = 0; j < 11; j++) {
    boxes[i] = [...(boxes[i] ? boxes[i] : []),
      new Box(i, j, i, j, "Test")
    ];
  }
}

console.log(boxes[3][3].getHeight());
console.log(boxes[4][6].getHeight());

answered Jul 08 '18 at 13:15

Olian04

6,480
2
27
54

this works! Thank you. I can only give you a tick because I'm new so it won't appear on the number. I must look at what the question mark and ellipsis are doing. – John G Jul 08 '18 at 13:20
@JohnG They are [ternary operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). – Olian04 Jul 08 '18 at 13:21
@JohnG Basically `(if this ? then this : else this)` – Olian04 Jul 08 '18 at 13:22
@JohnG the `...` is a [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) – Olian04 Jul 08 '18 at 13:23

score 0 · Answer 2 · answered Jul 08 '18 at 13:24

From what I understand, you have declared a class box and you want to create an array of objects of this class. Considering this is the case, you code has syntax error : the array and loop must be outside of the class definition.

Now since you want to make an array of objects, it's not a 2-D array it is just a one dimensional array.So the code should look like this

class Box {
constructor( width, height, x ,y, inside) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.inside = inside;
}

getHeight(){
    return this.height;
}

setHeight(newHeight){
    this.height = newHeight;
}}

let boxes = [];

for(let i = 0; i < 11; i++){
       boxes.push(new Box(i,i+2,i,i+2,"Test"));
}

for(var cnt in boxes)
  console.log(boxes[cnt]);

2 dimensional array of class objects in Javascript

2 Answers2