compare two objects without object reference Angular 10

Question

I want to compare two object to see if they are equal. Object A (offer) is the original object and object B (offerTemp) is an copy of A.

Object A is displayed in an table of the component, to see if there are any changes made in the table I want to compare A to B. But when I call the function to check if they are equal it says the objects aren't equal. I think this is because object A has a reference of the object and B has not (at least that is what I see when I log both objects in the console).

Object A (offer) (from console):

Offer {id: 1834, title: "A great article offer - 1834", description: "browser", sellDate: Mon Dec 25 2045 21:54:06 GMT+0100 (Central European Standard Time), valueHighestBid: 753, …}

Object B (offerTemp) (from console):

{id: 1834, title: "A great article offer - 1834", description: "browser", sellDate: Mon Dec 25 2045 21:54:06 GMT+0100 (Central European Standard Time), valueHighestBid: 753, …}

This is from component.ts:

ngOnInit(): void {
    this.offer = this.offerService.FindById(this.editOfferId);
    this.offerTemp = Object.assign({}, this.offer);
  }

cancelSelected(offer: Offer): void{
    if (offer === this.offerTemp) {
    // do stuff...
    }
    else {
      console.log(this.offer === this.offerTemp); // false in the console
      console.log(this.offer);
      console.log(this.offerTemp);
    }
  }

And this is the part from my html:

<div>
  <table>
    <tr> 
      <th>Selected offer details: (id: {{offer.id}})</th>
    </tr>
    <tr>
      <td>Title</td>
      <td>
        <input [(ngModel)]="offer.title" type="text" name="" id="">
      </td>
    </tr>
    <tr>
      <td>description</td>
      <td>
        <input [(ngModel)]="offer.description" type="text" name="" id="">
        </td>
    </tr>
    <tr>
      <td>auctionStatus</td>
      <td>
        <select>
          <option *ngFor="let key of keys" [value]="key" [selected]="offer.auctionStatus">{{statusen[key]}}</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>valueHighestBid</td>
      <td>
        <input [(ngModel)]="offer.valueHighestBid" type="text" name="" id="">
     </td>
    </tr>

  </table>
  <button mat-raised-button (click)="deleteSelected()"> Delete </button>
  <button mat-raised-button (click)="saveSelected(offer)"> Save </button>
  <button mat-raised-button (click)="clearSelected(offer)" > Clear </button>
  <button mat-raised-button (click)="resetSelected(offer)" > Reset </button>
  <button mat-raised-button (click)="cancelSelected(offer)"> Cancel </button>


</div>

Is there any way to compare these object without the object reference or another way I could fix this?

code-gorilla · Accepted Answer · 2020-11-07 20:57:38Z

3

JavaScript does not have a built-in property equality operator for objects and arrays.

A simple way to check if objects are equal is using JSON.stringify:

JSON.stringify(objectA) === JSON.stringify(objectB);

This will convert the objects into strings and makes the easily comparable. This approach also works well when the objects are nested.

Another option would be to use an equals method (or better a deep equal method that also works for nested objects), that iterates over all the objects' properties and compares their values.

answered Nov 7, 2020 at 20:57

code-gorilla

2,4581 gold badge10 silver badges27 bronze badges

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

1 Comment

gildniy Over a year ago

This one will not work properly if some of the values are of type function. Instead, a deep comparison is needed.

Lyubomir Vasilev · Accepted Answer · 2020-11-07 21:05:05Z

1

The comparison of two objects using three equal signs === will return true only if the two varaibles are references to the same object. You clearly do not want that.

You will either need to create your own way of comparing the objects, or use some javascript library that offers deep-compare of objects, like _.isEqual from lodash:

let object = { 'a': 1 };
let other = { 'a': 1 };
 
_.isEqual(object, other);
// => true
 
object === other;
// => false

answered Nov 7, 2020 at 21:05

Lyubomir Vasilev

3,04020 silver badges25 bronze badges

1 Comment

Ronny Giezen Over a year ago

Thanks for the reply. Both answers worked. I will look into the lib from lodash

Collectives™ on Stack Overflow

compare two objects without object reference Angular 10

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related