javascript comparing objects or even arrays of objects to check changes-CodePudding

So I have a data being loaded to a table and user can click and add input to cells , what is and how do we check if there are changes to the table data ?

for example if user click cell and added an input it should return TRUE since there are changes if user just click the cell and did not make any changes on input or did not update any field then return FALSE.

I could pass the row data to edit() and then compare it to the existing dataSource if there are changes to any values.

So it will check if there are new changes with the row and compare it with the orignal data in the dataSource.

I wanted to detect any changes of dataSource

Thanks for any help and idea.

#blitz

https://stackblitz.com/edit/am-all-imports-65vtbu?file=app/app.component.html

#ts code

  options: string[] = ['position', 'name', 'weight', 'symbol', 'symbol2'];
  dataSource = ELEMENT_DATA;

  edit(index: number, column: string) {
    this.editableColumn = column;
    this.editableIndex = index;
  }

  showInput(index: number, column: string) {
    return this.editableColumn === column && this.editableIndex === index;
  }

  showValue(index: number, column: string) {
    return this.editableColumn !== column || this.editableIndex !== index;
  }

  reset() {
    this.editableColumn = '';
    this.editableIndex = null;
  }
}

#html code

<table mat-table [dataSource]="dataSource" >
  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td
      mat-cell
      *matCellDef="let element; let i = index"
      (click)="edit(i, 'position')"
    >
      <span *ngIf="showValue(i, 'position'); else editPlace">{{
        element.position
      }}</span>
      <ng-template #editPlace>
        <mat-form-field>
          <input
            matInput
            placeholder="Placeholder"
            (blur)="reset()"
            appFocusOnLoad
            [(ngModel)]="element.position"
          />
        </mat-form-field>
      </ng-template>
    </td>
  </ng-container>

CodePudding user response：

Based on your requirement I guess the best solution is to apply change event on the inputs and keep an original copy of the data. That way you will know if someone had made any change in your table and what it had been changed to. I have created a stackblitz for the same, you can take a look here.

Please make sure you mark it as answer if it solves your issue. Happy Coding :)

CodePudding user response：

This is a workaround solution in case you need another approach. The idea is to store the state of the row that you are editing and after edit was made, check if something change.

Here is the code. Hope it helps!

One more thing, note that you should perform parsing and validations in your number fields for instance because after editing on the input a string is stored instead a number.