Duplicate entry being creating in array of objects when pushing the same data in two different arrays

Question

I am having a weird problem all because of allIpRecords: any; in which I want to maintain a copy of the ipRecords: any; because in the original code the ipRecords may change and I want to retain the previous copy in allIpRecords The problem is whenever the insert function runs and if I have this.allIpRecords = res.data; inside the insert function then in both the arrays ipRecords and this.allIpRecords duplicate entries of the inserted row gets created and in the table the same row is shown two times. If I remove the this.allIpRecords then nothing of this sort happens only single entry of the inserted items is there in the array. Even though in the database it is only inserted once but in the local array its shown two times.

   <td>
              <span></span>
          </td>
          <td>
              <input type="text" [(ngModel)]="newData.ip" />
          </td>
          <td>
              <input type="text"  [(ngModel)]="newData.forDomain" />
          </td>
          <td>
              <input type="text" [(ngModel)]="newData.status" />
          </td>
          <td>
              <input type="text" [(ngModel)]="newData.senderEmail" />
          </td>
          <td>
              <button class="common-btn" type="button" (click)="insert()">Insert</button>
          </td>


           </tr>
      <tr *ngFor="let record of ipRecords" class="colour02">
      <td>{{record.id}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.ip" ></td>
      <td *ngIf="record.id !== editRowId">{{record.ip}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.forDomain" ></td>
      <td *ngIf="record.id !== editRowId">{{record.forDomain}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.status" ></td>
      <td *ngIf="record.id !== editRowId">{{record.status}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.senderEmail" ></td>
      <td *ngIf="record.id !== editRowId">{{record.senderEmail}}</td>
      <td>
      <br>

Ts

       private newData: any = {};
       ipRecords: any;
       allIpRecords: any;

        ngOnInit() {
        this.auth.getAllIpRecords().subscribe((res: any)=>{
       this.ipRecords = res.data;
       this.allIpRecords = res.data;
       }
        }


        insert() {
if(Object.keys(this.newData).length === 0) {
  this.toastr.error("Empty record");
  return;
}
this.auth.addIpRecord(this.newData).subscribe((res: any)=>{
  if(res.status === "Success") {
    this.newData = {};
    this.ipRecords.push(res.data);
    this.allIpRecords.push(res.data);
    }
  }

score 0 · Accepted Answer · answered May 28 '19 at 19:31

0

On both variables, you are passing the same object reference -

this.ipRecords = res.data;
this.allIpRecords = res.data;

So, modification on any one variable will change all of them because they are the same reference.

To solve this, clone res.data and then assign it to the variables. There is an easy trick to do this by using JSON.stringify() and JSON.parse()

this.ipRecords = JSON.parse(JSON.stringify(res.data));
this.allIpRecords = JSON.parse(JSON.stringify(res.data));

You can find more detailed information about object cloning HERE

answered May 28 '19 at 19:31

Arshad

218
3
10

That works but cant really fathom both are totally different arrays still one effects the other just because they have the same data – venabeo May 29 '19 at 15:03
They hold reference to the same data. Kind of like the pointers. So, actually it's just one data but you can access it through two reference. – Arshad May 29 '19 at 18:12
Imagine you have a house work two does where you store boxes. You can add or remove boxes through one door, and when you enter through the other you will see the changes in the boxes. – Arshad May 29 '19 at 18:16

Duplicate entry being creating in array of objects when pushing the same data in two different arrays

1 Answers1