Nested loops through an array of objects in a Vue Instance

Question

I've created this large Array of square objects in my Vue Instance, that look like this:

new Vue({
el: '#application',
data:
{
    title : 'Conways Game of Life',
    squaresClassVar : 'squares',
    userColor : '#453BCC',
    startBool : true,
    squaresFromServer:[],
    squares:
    [
        { row: 0, column: 0, color:'#D3D3D3'},
        { row: 0, column: 1, color:'#D3D3D3'},
        { row: 0, column: 2, color:'#D3D3D3'},
        { row: 0, column: 3, color:'#D3D3D3'},
        { row: 0, column: 4, color:'#D3D3D3'},
        { row: 0, column: 5, color:'#D3D3D3'},
        ...
     ]

Each square is tied to an actual square canvas in my HTML and CSS. When I make a request to the server I'm populating the squaresFromServer[] Array which gets populated just like the squares array. I'm trying to loop through both arrays to update the colors of the squares that are sent from the server.

the current algorithm looks like this:

this.squares.forEach(indexLocalSquares => {
    this.squaresFromServer.forEach(indexServerSquares => {
        if(indexLocalSquares.row == indexServerSquares.row  && indexLocalSquares.column == indexServerSquares.column )
        {
            console.log('entered')
            indexLocalSquares.color = indexServerSquares.color 
        }
        else
        {
            indexLocalSquares.color = '#D3D3D3'
        }
    });
});

The problem is indexLocalSquares.color is not actually updating with the color that is sent from the server's square.

Does anyone know how I might loop through both of these arrays so that I could update the color of the squares Array with the squares that are sent from the server.

In most other languages I would simply do something like this:

for(int i = 0, i <= squares.length - 1, i++)
{
    for(int j = 0, j <= squaresFromServer.length - 1, j++)
    {
        if(squares[i].row == squaresFromServer[j].row && squares[i].column == squaresFromServer[j].column)
        {
            squares[i].color == squaresFromServer[j].color
        }
    }
}

Answer 1

You are overwriting the color in different iterations of the cycle. First set all colors to your default color and then update only those colors which are present in the server response

this.squares.forEach(indexLocalSquares => {
            indexLocalSquares.color = '#D3D3D3'
});

this.squares.forEach(indexLocalSquares => {
    this.squaresFromServer.forEach(indexServerSquares => {
        if(indexLocalSquares.row == indexServerSquares.row  && indexLocalSquares.column == indexServerSquares.column )
        {
            indexLocalSquares.color = indexServerSquares.color 
            console.log(indexLocalSquares);
        }
    });
});

Please note that nested iteration is of O(rows * cols) complexity.