Splice object from array - arrays

Question

I get array Of data from API and I assign it to two arrays. One of them I bind on it to view checkbox and when I unchecked checkbox I need to splice this object from the second array , but it splice from the two arrays
<div class="row varibles-box" >
<div *ngFor="let variant of variantDetails">
<mat-checkbox (change)="unCheckVariant(variant,$event)" class="example-margin col-4" [checked]="true">
{{variant.englishName}}
</mat-checkbox>
</div>
</div>
this.addProductService.addCustomProducts(this.unitsForm.value).subscribe((res: any) => {
this.variantDetails = res.data ;
this.VariantToSend = res.data;
this.dataSource = new MatTableDataSource(res.data);
console.log(this.VariantToSend)
console.log(this.variantDetails)
});
onCheckVariant(data, event) {
if (!event.checked) {
this.VariantToSend.splice(data, 1)
console.log(this.variantDetails)
console.log(this.VariantToSend)
} else {
this.VariantToSend.push(data)
}
this.dataSource = new MatTableDataSource(this.VariantToSend);
};

Answer 1

Be aware that arrays are "stored" as references in variables.
This means when you write
this.variantDetails = res.data ;
this.VariantToSend = res.data;
Then both your local variables are pointing to the same array. As a result a change to one of them, will effect the other directly.
You could for example use the spread operator.
this.variantDetails = res.data ;
this.VariantToSend = [...res.data];
This solution will create a new array with the same content for the second local variable. But be aware "same content" should be treated as such. If the original array contains objects or arrays (for both they are stored per reference and not per value) you will have the same problem one level deeper. That means if you would change an attribute of a object in the array, then this attribute for this object would ALSO be changed in the other arrays. Because both share the same reference.
A different solution would be not to use "splice" (which changes the array directly) but to use "slice" (if possible) , which will return a new array and leave the original unchanged.

Answer 2

Even there is two arrays but they are pointing to the same reference so whenever u u made change one array it will automatically affect another one.use slice() it returns a new array and leaves the original as it is.
<div class="row varibles-box" >
<div *ngFor="let variant of variantDetails">
<mat-checkbox (change)="unCheckVariant(variant,$event)" class="example-margin col-4" [checked]="true">
{{variant.englishName}}
</mat-checkbox>
</div>
</div>
this.addProductService.addCustomProducts(this.unitsForm.value).subscribe((res: any) => {
this.variantDetails = res.data ;
this.VariantToSend = this.variantDetails.slice();
this.dataSource = new MatTableDataSource(res.data);
console.log(this.VariantToSend)
console.log(this.variantDetails)
});
onCheckVariant(data, event) {
if (!event.checked) {
this.VariantToSend.splice(data, 1)
console.log(this.variantDetails)
console.log(this.VariantToSend)
} else {
this.VariantToSend.push(data)
}
this.dataSource = new MatTableDataSource(this.VariantToSend);
};