CODEWITHSUNDEEP
javascriptarraysjavascript-objects
Paolo Donato Navarro
Paolo Donato Navarro

Reputation: 149

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

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.

Upvotes: 0

Views: 77

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370689

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) }
  ))
));

Upvotes: 1

Related Questions