xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" data-presets="env,react">
function compareArraysOfObjects(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false; // Arrays have different lengths, they are not equal
}
// Sort the arrays based on a unique identifier or specific property
const sortedArr1 = arr1.sort((a, b) => a.id - b.id);
const sortedArr2 = arr2.sort((a, b) => a.id - b.id);
for (let i = 0; i < sortedArr1.length; i++) {
const obj1 = sortedArr1[i];
const obj2 = sortedArr2[i];
// Compare the objects
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
return false; // Objects are different, arrays are not equal
}
}
return true; // Arrays are equal
}
function App() {
const array1 = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Alice' }
];
const array2 = [
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Alice' },
{ id: 1, name: 'John' }
];
const array3 = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 4, name: 'Bob' }
];
const isEqual1 = compareArraysOfObjects(array1, array2);
const isEqual2 = compareArraysOfObjects(array1, array3);
return (
<div className='container'>
<p>array1 and array2 are equal: {isEqual1.toString()}</p>
<p>array1 and array3 are equal: {isEqual2.toString()}</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
<style>
.container {
padding: 20px;
background-color: #f3f3f3;
}
.container p {
margin-bottom: 10px;
font-size: 16px;
}
.container p:last-child {
margin-bottom: 0;
}
</style>
</body>
</html>