When I add a javascript object to an array their properties changes

Question

I have this type of object:

//This is a single cell
{
  state: 0,
  row: 0,
  col: 0
}

And I want to have: An array of arrays (board states) of arrays (rows of the board) of cells (columns) but when I add a new row to the board states array every column is changed to 59 whit no reason (59 is the max possible column and 24 is the maximum row).

let board = this.cells //Actuall board
  let newBoards = []//Array of all the boards
  let cellNeighbors //Save the number of neighbors of x cell
  let rowOfCells = [] // An array whit a row of cells
  let newCell


    newBoards.push([])
    for(let i = 0; i < board.length; i++)
    {
      newCell = {state: 0, row: 0, col: 0} //A new cell to push into an array

      for(let j = 0; j < board[i].length; j++)
      {  
        newCell.row = i 
        newCell.col = j

        cellNeighbors = countNeighbors(i, j, board)

        // Apply rules to cell
        newCell.state = rulesAply(cellNeighbors, board[i][j].state)
        // Add new cells to an array
        rowOfCells.push(newCell)
        // Set timeout for make a steps animation of every state in the array
      }
      newBoards[0].push(rowOfCells)
      rowOfCells = []
    }
console.log(newBoards)

My output is something like this:

[Array(24)]
0: Array(24)
0: Array(60)
0: {state: 0, row: 0, col: 59}
1: {state: 0, row: 0, col: 59}
2: {state: 0, row: 0, col: 59}
3: {state: 0, row: 0, col: 59}
4: {state: 0, row: 0, col: 59}
5: {state: 0, row: 0, col: 59}
6: {state: 0, row: 0, col: 59}
7: {state: 0, row: 0, col: 59}
8: {state: 0, row: 0, col: 59}
9: {state: 0, row: 0, col: 59}
10: {state: 0, row: 0, col: 59}
11: {state: 0, row: 0, col: 59}
12: {state: 0, row: 0, col: 59}
13: {state: 0, row: 0, col: 59}
14: {state: 0, row: 0, col: 59}
15: {state: 0, row: 0, col: 59}
16: {state: 0, row: 0, col: 59}
17: {state: 0, row: 0, col: 59}
18: {state: 0, row: 0, col: 59}
19: {state: 0, row: 0, col: 59}
20: {state: 0, row: 0, col: 59}
21: {state: 0, row: 0, col: 59}
22: {state: 0, row: 0, col: 59}
23: {state: 0, row: 0, col: 59}
24: {state: 0, row: 0, col: 59}
25: {state: 0, row: 0, col: 59}
26: {state: 0, row: 0, col: 59}
27: {state: 0, row: 0, col: 59}
28: {state: 0, row: 0, col: 59}
29: {state: 0, row: 0, col: 59}

and continues with every row, and each col always is 59.

CertainPerformance · Accepted Answer · 2019-12-18 01:11:54Z

1

You only create a newCell in the outer loop, so when you .push it in the inner loops, you're pushing the same object in memory to the array multiple times. Create the object inside the inner loop instead:

for (let i = 0; i < board.length; i++) {
  const rowOfCells = [];
  for (let j = 0; j < board[i].length; j++) {
    const newCell = { state: 0, row: i, col: j };
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    cellNeighbors = countNeighbors(i, j, board)

    // Apply rules to cell
    newCell.state = rulesAply(cellNeighbors, board[i][j].state)
    // Add new cells to an array
    rowOfCells.push(newCell)
    // Set timeout for make a steps animation of every state in the array
  }
  newBoards.push(rowOfCells);
}

(pretty sure you wanted to push the new row of cells to the new newBoards array, not to its first child)

Or, with array methods instead:

const newBoards = board.map((rowArr, row) => (
  row.map((oldCell, col) => (
    { row, col, state: countNeighbors(row, col, board) }
  ))
));

edited Dec 18, 2019 at 1:11

answered Dec 18, 2019 at 1:06

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

2 Comments

Paolo Donato Navarro Over a year ago

Wow thank you, I don't know why it was taking to long to solve for me

CertainPerformance Over a year ago

Nitpick, but the row and col properties seem a bit imprecise - when seeing a variable or property with that name, I first think that it holds a collection of multiple cells. You might consider changing them to something like rowIndex, maybe. (precise variable names can prevent bugs, and make code more readable)

Collectives™ on Stack Overflow

When I add a javascript object to an array their properties changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related