Angular typescript, cannot push to an array. Undefined

Question

I am new to angular and my JavaScript is basic. I am trying to write a program the solves Sudoku puzzles. A 9x9 grid will have 81 points or squares. I figured that I could check for violations of Sudoku rules (no repeats of a number within a single row, column, or 3x3 by sector) faster if I organized the points into three identical lists of 81, but organized three different ways. Again, by column, row, and sector.

So: I would like an Array that contains three Arrays that contains nine Arrays that contains nine points.

I know that the Array<Array<Point>> has a length of 9. I declared it as such and when I double check with a console log, it seems it has a length of 9. So I was thinking that there is 9 nulls Array<Point> within. I figured I could just push points to any of those 9 Arrays, but I have no luck. I keep getting told that grid[0][x] is undefined. Any ideas? Thanks.

  gridByX:Array<Array<Point>> = new Array<Array<Point>>(9);
  gridByY:Array<Array<Point>> = new Array<Array<Point>>(9);
  gridByS:Array<Array<Point>> = new Array<Array<Point>>(9);
  grid:Array<Array<Array<Point>>> = [this.gridByX, this.gridByY, this.gridByS];

  constructor() {}

  ngOnInit() {
    this.populateGrid();
  }

  populateGrid(){
    let counter = 0;
    for (let x = 0; x < 9; x++){
      for (let y = 0; y < 9; y++){
        let point = new Point(counter, x, y);
        this.grid[0][x].push(point);
        this.grid[1][y].push(point);
        this.grid[2][point.sector].push(point);


      }
    }
  }

When you create a new Array(n), it creates an array with n undefined elements. Then, you can assign elements using bracket notation (eg: array[x] = new Point()). Also, you can only call .push on arrays. In this case, your syntax should look like: grid[0][x] = new Point(counter, x, y) — Brian
– Brian, Commented Sep 10, 2018 at 20:11
Maybe I misunderstand, but grid[0][x] is an Array<Point>. I don't think it can be defined as a single point like grid[0][x] = new Point(counter, x, yz). But you are right about the undefined elements, but if I create a new Array each loop i'm just going to be stuck with an Array of one rather an Array of 9 points like I am aiming for. I guess I need to check if the array is undefined, if so create one, but if not, push the point. — Miles Moran
– Miles Moran, Commented Sep 10, 2018 at 20:18
Ah sorry about that. You will need to define grid[0][x] first in your loop before pushing elements to it. — Brian
– Brian, Commented Sep 10, 2018 at 20:19

rnarcos · Accepted Answer · 2018-09-10 20:15:01Z

1

 gridByX:Array<Array<Point>> = new Array<Array<Point>>(9);
  gridByY:Array<Array<Point>> = new Array<Array<Point>>(9);
  gridByS:Array<Array<Point>> = new Array<Array<Point>>(9);
  grid:Array<Array<Array<Point>>> = [this.gridByX, this.gridByY, this.gridByS];

  constructor() {}

  ngOnInit() {
    this.populateGrid();
  }

  populateGrid(){
    let counter = 0;
    for (let x = 0; x < 9; x++){
      for (let y = 0; y < 9; y++){
        let point = new Point(counter, x, y);

        grid[0][x] = grid[0][x] || [];
        grid[0][x].push(point);

        grid[1][y] = grid[1][y] || [];
        grid[1][y].push(point);

        grid[2][point.sector] = grid[2][point.sector] || [];
        grid[2][point.sector].push(point);
      }
    }
  }

Try defining the index property before manipulating it.

answered Sep 10, 2018 at 20:15

rnarcos

861 gold badge3 silver badges13 bronze badges

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

Comments

Lukasz Wojciak · Accepted Answer · 2018-09-10 20:16:08Z

0

You cannot use this outside of an instance scope, so the line: grid:Array<Array<Array<Point>>> = [this.gridByX, this.gridByY, this.gridByS]; cannot be assigned as a class property

just leave grid:Array<Array<Array<Point>>>; for property declaration and make the assignment in the constructor() {} call

answered Sep 10, 2018 at 20:16

Lukasz Wojciak

893 bronze badges

Comments

John Montgomery · Accepted Answer · 2018-09-10 20:47:20Z

0

So I was thinking that there are 9 null Array<Point> within.

This is correct. However, a null array is not the same thing as an empty array. Before you can push to it, you have to instantiate it with an actual array object.

Try this for a three-line solution:

gridByX:Array<Array<Point>> = new Array<Array<Point>>(9).fill().map(() => []);
gridByY:Array<Array<Point>> = new Array<Array<Point>>(9).fill().map(() => []);
gridByS:Array<Array<Point>> = new Array<Array<Point>>(9).fill().map(() => []);

fill with no argument initializes it with 9 undefined values, which are then replaced with empty arrays.

edited Sep 10, 2018 at 20:47

answered Sep 10, 2018 at 20:15

John Montgomery

7,10610 gold badges58 silver badges73 bronze badges

3 Comments

Miles Moran Over a year ago

Thanks. I knew there had to be an easier way. I made some edits so that if the array is undefined, it is instantiated, then a point is added. If the array is defined, it will be added. Think this solves things, but if not I will definitely use fill, which I did not know existed. Thanks alot!

John Montgomery Over a year ago

Actually, don't do that, I forgot that fill has funny behavior when you use it with objects (which includes sub-arrays). I'll update my answer with a better short solution.

John Montgomery Over a year ago

(if you're curious, the original solution would have filled it with nine references to the same array, so pushing a value to one of them would push it to all nine)

Collectives™ on Stack Overflow

Angular typescript, cannot push to an array. Undefined

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related