Constant JSON object vales changing in the loop while creating a new object dynamically in javascript

Hello I have a template object as follows:

const baseObj = {
  objKey: '',
  index: 1,
  cells: [
    {
      key: 'id',
      value: ''
    },
    {
      key: 'name',
      value: ''
    }
  ]
};

I want to create a dynamic array of the objects from an array as follows:

const allDetails = [
  {
    objKey: '876',
    name: 'abc',
    id: '123',
    address: '123abc'
  },
  {
    objKey: '098',
    name: 'def',
    id: '456',
    address: '456def'
  },
]

For this I am writing a simple loop as follows:

const allData = [];
for(let i = 0; i < allDetails.length; i++)
{
  const detail = allDetails[i];
  const row = Object.assign({}, baseObj);
  row.cells = Object.assign([], baseObj.cells);
  row.key = details.objKey;
  row.index = i+1;
  for(let j = 0; j < row.cells.length; j++)
  {
    const cell = row.cells[j];
    switch(cell.key){
      case 'id': {
        cell.value = detail.id;
        break;
      }
      case 'name': {
        cell.value = detail.name;
        break;
      }
    }
  }
  allData.push(row);
}

Now I am expecting allData to be:

[
  {
    objKey: '876',
    index: 1,
    cells: [
      {
        key: 'id',
        value: '123'
      },
      {
        key: 'name',
        value: 'abc'
      }
    ]
  },
  {
    objKey: '098',
    index: 2,
    cells: [
      {
        key: 'id',
        value: '456'
      },
      {
        key: 'name',
        value: 'def'
      }
    ]
  }
]

but when I print it is giving me as:

[
  {
    objKey: '876',
    index: 1,
    cells: [
      {
        key: 'id',
        value: '456'
      },
      {
        key: 'name',
        value: 'def'
      }
    ]
  },
  {
    objKey: '098',
    index: 2,
    cells: [
      {
        key: 'id',
        value: '456'
      },
      {
        key: 'name',
        value: 'def'
      }
    ]
  }
]

Looks like the array values are being overwritten every time. On debugging I can see somehow while changing the values of row cells it is also changing values for cells for baseObj. However only the issue is coming for array of the object. I could not see where I am going wrong as in every loop I create the new object row from the baseObj. Can anyone spot the mistake I am making.

Answer

You have to be careful about mutating your objects. It is best to deep clone your objects and arrays.

Here is another way to write your code:

const allData = [];
for (let i = 0; i < allDetails.length; i++) {
    const detail = allDetails[i];
    const cells = [];
    for (let j = 0; j < baseObj.cells.length; j++) {
        const cell = {...baseObj.cells[j]};
        switch (cell.key) {
            case 'id':
                cell.value = detail.id;
                break;
            case 'name':
                cell.value = detail.name;
                break;
        }
        cells.push(cell)
    }
    const row = {objKey: detail.objKey, index: i + 1, cells};
    allData.push(row);
}