Why do two equal objects show "not equal" in Angular 2

Question

I am loading an array from a json file. every 1.5 seconds I check if there are any changes in the file (at the moment I am testing one file without any changes), but when I check,

if ( this.itemsParentArray[i] !== this.itemInArray[i] ) 

it always shows that it is not equal, and console.log ("not equal")

Am I missing something in the code? Here he is:

 export class HomeComponent { itemsParentArray = []; itemInArray = []; myRes: Content; showAssigned:boolean = false; constructor(private structureRequest: StructureRequestService) { setInterval(() => { this.timerGetStructure(); }, 1500); } // using with setInterval to get new data and sets into content Array with this.updateItems(result) if it new timerGetStructure() { this.structureRequest.sendRequest().subscribe((result) => this.updateItems(result)); } updateItems(result) { this.myRes = result; this.itemInArray = this.myRes.content; for ( let i = 0; i < this.itemInArray.length; i++) { if ( this.itemsParentArray[i] !== this.itemInArray[i] ) { // this.itemsParentArray[i] = this.itemInArray[i]; console.log("not equal"); } } } // ngOnInit() { //makes http request and puts result into parentArray after 3 sec. this.structureRequest.sendRequest().subscribe((result) => this.viewNodes(result)); } //view items viewNodes(result) { setTimeout(() => { this.myRes = result; this.itemsParentArray = this.myRes.content; this.showAssigned = true; }, 3000); } } 

As you can see, it loads data from one file (I do not change the file data !!!):

 this.itemsParentArray = this.myRes.content; 

and (every 1.5 seconds):

 this.itemInArray = this.myRes.content; 

Answer 1

== and especially === do not check if the object contains the same properties with the same values. It just checks if this is the same object reference.

 {} == {} 

or

 {} === {} 

also leads to false .

See also Typescript: avoid comparison by reference and How to initialize a typescript object using a JSON object

Plunger example

Answer 2

I wrote this helper function in TypeScript:

 export class Helper { private _recursiveProperties: string[] = ['RecursiveProperty', ...]; public equals(obj1: any, obj2: any): boolean { if (typeof obj1 !== typeof obj2) { return false; } if ((obj1 === undefined && obj2 !== undefined) || (obj2 === undefined && obj1 !== undefined) || (obj1 === null && obj2 !== null) || (obj2 === null && obj1 !== null)) { return false; } if (typeof obj1 === 'object') { if (Array.isArray(obj1)) { if (!Array.isArray(obj2) || obj1.length !== obj2.length) { return false; } for (let i = 0; i < obj1.length; i++) { if (!this.equals(obj1[i], obj2[i])) { return false; } } } else { for (let prop in obj1) { if (obj1.hasOwnProperty(prop)) { if (!obj2.hasOwnProperty(prop)) { return false; } //Endless loop fix for recursive properties if (this._recursiveProperties.indexOf(prop) >= 0) { if (obj1[prop] !== obj2[prop]) { return false; } } else if (!this.equals(obj1[prop], obj2[prop])) { return false; } } } for (let prop in obj2) { if (obj2.hasOwnProperty(prop)) { if (!obj1.hasOwnProperty(prop)) { return false; } } } } return true; } return obj1 === obj2; } } 

Where _recursiveProperties contains property names (if any) that cause an infinite loop. For instance. I had an object (obj1) with a property containing a link to another object (obj2), which, in turn, contained a link to obj1.

If anyone has a better solution, make a comment.

Use will then:

 let helper = new Helper(); if (helper.equals(this.itemsParentArray[i], this.itemInArray[i])) 

Answer 3

To compare two objects in Angular 2/4, I tried under code. which fully worked.

JSON.stringify (obj1) === JSON.stringify (obj2);