javascript comparing objects or even arrays of objects to check changes

Question

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%2Fapp.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" class="mat-elevation-z8">
  <!--- 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>

Since arrays and objects are by reference, you could simply convert it to strings and perform the comparison like JSON.stringify(a) === JSON.stringify(b). Does this answer your question? — cybering
– cybering, Commented Sep 2, 2022 at 21:27
I dont think so Sir , for example I click edit ang pass the table object row value which is an object how will I check that that object has changes which is from the arrays of object of my table datasource — Tim Launders
– Tim Launders, Commented Sep 2, 2022 at 21:32
stackblitz.com/edit/… I added editTest method that passes the row object — Tim Launders
– Tim Launders, Commented Sep 2, 2022 at 22:00

cybering · Accepted Answer · 2022-09-02 23:36:38Z

1

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.

answered Sep 2, 2022 at 23:36

cybering

1,05811 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sudipto Mukherjee Over a year ago

This is also a good approach. But it has 2 CONS: 1. startEditing() gets called every time you click on the input. (Even if you have it already in edit mode) 2. If a user edits a value more than one you will not get the original value any more. (Which may not be needed in most of the practical scenarios) Saying that if these conditions are ignored this is a good solution

cybering Over a year ago

@SudiptoMukherjee you are right. I did it that way just for simplicity and to show how the row value could be retrieved in order to be adapted to the needed use case. There are a lot of possible scenarios to follow the initial code provided.

Sudipto Mukherjee · Accepted Answer · 2022-09-02 23:12:30Z

1

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 :)

edited Sep 2, 2022 at 23:12

answered Sep 2, 2022 at 22:56

Sudipto Mukherjee

9456 silver badges13 bronze badges

7 Comments

Tim Launders Over a year ago

No Sir , I can detect what row has been updated or change I have no problem with that . My concern is how to know if there is a value that was being change based on the original and current arrays of objects which is the data source.

Tim Launders Over a year ago

Here is how it goes , as you can see I have ELEMENT_DATA which are array of objects displayed on the table (that is the current and original data). Let us say I edited the name hydrogen I replace the input field value with hydrogen1 or any name , I will get that updated row with the updated value and compare it to the data in the datasource or element data if all data are the same from the original

Sudipto Mukherjee Over a year ago

I have edited the stackblitz. Please check if that fulfills your requirement.

Tim Launders Over a year ago

But the question Sir is how to know that the original was modified?

Tim Launders Over a year ago

I just need to know if the original was modified or not

|

Collectives™ on Stack Overflow

javascript comparing objects or even arrays of objects to check changes

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related