How to find out why two objects are not compared with angular.equals?

Question

I am using the following AngularJS code :

if (angular.equals(rowData, $scope.grid.backup[i])) { console.log('equal') } 

Note that AngularJS has an equality function that compares each element within an object.

The two objects look the same when I debug, but Angular disagrees. I just do not see what is not equal. Is there any other way to compare?

Answer 1

The doc document for angular.equals() says:

Two objects or values ​​are considered equivalent if at least one of the following is true:

Both objects or values ​​are compared ===.

Both objects or values ​​are of the same type, and all their properties are equal, comparing them with angular.equals.

Both values ​​are NaN. (In JavaScript, NaN ==> NaN => false, but we consider two NaN equal)

Both values ​​represent the same regular expression (In JavasScript, / abc / == / abc / => false, but we consider two regular expressions equal when their textual representation matches).

So, if you get false for .equals() , then we can conclude the following:

• Both are not the same object, so they do not pass ===
• Both values ​​are not NaN (you still work with objects)
• Both values ​​are not the same regular expression

So, this leaves only the 2nd element in the documentation, which means that either the objects are not of the same type, or some of their properties do not match. So that someone could help you in the future, what exactly between them, we will need to see the actual objects or the code that creates them.

If you have a non-minimized version of angular installed on your page, you can also just make your call to angular.equals() and see which step in the code it finds the difference.

Or, if there are many properties or many objects, so the complexity of the debugger is difficult, you can write your own little debugging procedure to tell you which property was different. It will look something like this:

 function compareObjects(s, t) { if (typeof s !== typeof t) { console.log("two objects not the same type"); return; } if (typeof s !== "object") { console.log('arguments are not typeof === "object"'); return; } for (var prop in s) { if (s.hasOwnProperty(prop)) { if (t.hasOwnProperty(prop)) { if (!angular.equals(s[prop], t[prop])) { console.log("property " + prop + " does not match"); } } else { console.log("second object does not have property " + prop); } } } // now verify that t doesn't have any properties // that are missing from s for (prop in t) { if (t.hasOwnProperty(prop)) { if (!s.hasOwnProperty(prop)) { console.log("first object does not have property " + prop); } } } } // then call this function on your two objects // and then look in the debug console to see what it reports compareObjects(rowData, $scope.grid.backup[i]); 

Answer 2

I suggest you try debugging.

Open the developer panel in Chrome, put the break-point in the equality function in angular. Now that the comparison is taking place, go line by line, going line by line. Check at what point his return is false, and you are likely to get a reason.

Or get the equality function from angular source:

https://github.com/angular/angular.js/blob/124e9b803ffabee407531da5dd1d3ac6ca1d1ffb/src/Angular.js#L604

Change it using the console logs on each return false and use this function to compare your objects with debugging.