How To Compare Two JSON Objects In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript JSON | Written & Updated By - Dikshita
In this tutorial we will show you the solution of how to compare two JSON objects in JavaScript, here we needs to use external lodash library support because for compare two objects we are going to use _.isEqual() method in lodash.
The isEqual() function used to find that whether the 2 given arrays are same or not.
Two arrays are the same if they have the same number of elements, both the property and the values need to be the same.
Step By Step Guide On How To Compare Two JSON Objects In JavaScript :-
Here we defined div element with id’s ‘res’ for append results on webpage.
In script we defined variable ‘obj1,obj2’ and it contains key,value pair of same json data.
Then using ._isEqual() method we passing two objects into that method for compare two array of object then it returned result stored on variable ‘v’ and we know it will returns Boolean value so it may be true or false.
Then using if condition we checking whether it returns ‘true’ or not then respective result message we appending on webpage.
<!DOCTYPE html>
<html>
<head>
<title>COMPARE JSON OBJECTS</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
</head>
<body>
<div id="res"></div>
<script>
const obj1={name:"ABC"};
const obj2={name:"ABC"};
var v=_.isEqual(obj1,obj2);
console.log(v);
if(v==true){
document.getElementById('res').innerHTML="Both Are Same";
}
else{
document.getElementById('res').innerHTML="Both Are Not Same";
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined one div element with id ‘res’ for appends result on webpage by innerHTML.
- In script variable ‘obj1,obj2’ defined for store json data of key, value pairs of same data ‘name:"ABC"’.
- The ._isEqual() method needs name of those two arrays so we passed parameter ‘obj1,obj2’ then result will returns as Boolean value that will stored on variable ‘v’.
- We checking that ‘v’ value whether its true or not using if condition and if ture means message ‘Both Are Same’ will appended on webpage otherwise message ‘Both Are Not Same’ appended on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to compare two json objects using javascript.
When we executes program on browser we can see the result messages of ‘Both Are Same’ on webpage because we specified same data on both array objects.
If we change one object data to some other value then result message will ‘Both Are Not Same’ displayed on webpage.
I hope this tutorial on how to compare two json objects in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
