ArrayPush is overwriting an array of objects

Question

Goal add selected objects from table to an array of objects.

I have a data table that has a select checkbox on each row. When the check box is checked the selected row(object) is passed to a method.

 <ng-container #cmsTable *cdkVirtualFor="let cms of cmsContent | searchFilter: searchText : count | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
                      <tr style="width: 100%; min-height: 30px;">
                          <td style="word-wrap: break-word;max-width: 200px;">{{cms.buName}}
                          </td>
                          <td style="word-wrap: break-word;max-width: 200px;">{{cms.category}}
                          </td>
                          <td style="word-wrap: break-word;max-width: 200px;">
                              {{cms.contentTitle}}</td>
                          <td style="word-wrap: break-word;max-width: 200px;"><a
                                  href="{{cms.contentURL}}" target="_blank">{{cms.contentURL}}</a>
                          </td>
                          <td style="word-wrap: break-word;max-width: 200px;"> {{cms.contentInfo}}
                          </td>
                          <td style="word-wrap: break-word;max-width: 200px;">{{cms.contentType}}
                          </td>
                          <td>
                            <div class="custom-control custom-checkbox">
                              <input type="checkbox" (change)="addToSelectedList($event, cms)">
                            </div>
                          </td>
                      </tr>
  </ng-container>

addToSelectedList in component:

addToSelectedList(event: any, cmsObj: cms)
{
// CMS model is related to a DB in the backend
// Training Obj is a model that will just be passed to the api to send values in an email
// the values of the selected trainings will be passed to trainingobj and then added to the array of objects
if(event.target.checked)
{
  this.cmsService.selectedContent = Object.assign({}, cmsObj);
  this.selectedTrainings = this.cmsService.selectedContent;
  this.cmsService.trainingObj.trainingID = this.selectedTrainings.ID;
  this.cmsService.trainingObj.buName = this.selectedTrainings.buName;
  this.cmsService.trainingObj.category = this.selectedTrainings.category;
  this.cmsService.trainingObj.contentTitle = this.selectedTrainings.contentTitle;
  this.currTrainSelect = this.cmsService.trainingObj;

   //check if slection has been selcted already then unchecked then checked again.
   let data = this.trainingList.some((item) => item.id  === this.cmsService.trainingObj.trainingID);
    if(data === false)
    {
      console.dir("selection can be added to array " + '\n' + '\n' +
      " add selection  :" + '\n' + JSON.stringify(this.currTrainSelect));
      this.trainingList.push(this.currTrainSelect);
      this.trainingsFinal = JSON.stringify(this.trainingList);
      console.log('\n' + " ARRAY  of trainings = : " + '\n' + this.trainingsFinal); 
    }
}
else
{
  this.removeTraingSelected(this.currTrainSelect.trainingID);
}

}

When a first selection is made it adds it to the array with no problems. When a second selection is made the array shows the second object two times [{second selection},{second selection}] instead of [{first selection},{second selection}]

Any Ideas?

Answer 1

You only work with one object, which you reuse and modify and then push again in the array. But then you have the same object in the array twice. Whatever you did with that object will be visible whether you access it via the array's first slot, or second slot.

To avoid this, make sure that you create a new object. As you are copying things around, there are several places where you can decide to create a new object. This is just one of the many places where you can change your code:

Change:

  this.trainingList.push(this.currTrainSelect);

To:

  this.trainingList.push({...this.currTrainSelect});