How to remove duplicates from an array of objects using JavaScript? : Given an assortment of articles and the task is to dispose of the duplicate item part from the group list. There are two procedures to deal with this issue which are discussed below :
Strategy 1:
Using one of the keys as index: A temporary array is created which stores the objects of the original array using one of its keys as the index. Anyone of the object properties can be used as a key. The key is extracted from the object and used as the index of the new temporary array. The object is then assigned to this index. This approach will remove the duplicate objects as only one of each object of the original array will get assigned to the same index.
<!DOCTYPE html>
<html>
<head>
<title>
How to remove duplicates from an array of objects using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">
Online Portfolio
</h1>
<b>
How to remove duplicates from an array of objects?
</b>
<p>
Click on the button to remove the duplicated in the array
</p>
<p>Check the console for the output</p>
<button onclick="deleteDuplicates()">
Remove Duplicate
</button>
<script type="text/javascript">
function deleteDuplicates() {
// Create an array of objects
subjects = [{
title: "C++",
author: "Rohit Gautam"
}, {
title: "JavaScript",
author: "James"
}, {
title: "Python",
author: "Ajit"
}, {
title: "ReactJS",
author: "Sandeep"
}, {
title: "ReactJS",
author: "Alok"
}, {
title: "ReactJS",
author: "Ankit"
}, ];
// Display the list of array objects
console.log(subjects);
// Declare a new array
let newArray = [];
// Declare an empty object
let otherObject = {};
// Loop for the array elements
for (let i in subjects) {
// Extract the title
objTitle = subjects[i]['title'];
// Use the title as the index
otherObject[objTitle] = subjects[i];
}
// Loop to push unique object into array
for (i in otherObject) {
newArray.push(otherObject[i]);
}
// Display the unique objects
console.log(newArray);
}
</script>
</body>
</html>Output :
How to remove duplicates from an array of objects using JavaScript?
Strategy 2:
Converting the exhibit to a Set to eliminate the copies: A Set item holds just extraordinary upsides of any sort. This property can be utilized to store just the items that are special in the cluster.
Each object of the cluster is first changed over into a JSON encoded string utilizing the JSON.stringify technique. The JSON encoded string is then planned to an exhibit utilizing the guide() strategy. Another set is made by passing this cluster to the new set constructor. This progression will eliminate every one of the copy components as the JSON encoded strings will be something similar for similar components.
The set is then changed over to an Array utilizing the from() strategy, passing the set as a boundary. This exhibit won’t have copied objects.
<!DOCTYPE html>
<html>
<head>
<title>
How to remove duplicates from an array of objects using JavaScript ?
</title>
</head>
<body>
<h1 style="color: red">
Online Portfolio
</h1>
<b>
How to remove duplicates from an array of objects?
</b>
<p>
Click on the button to remove the duplicated in the array
</p>
<p>Check the console for the output</p>
<button onclick="deleteDuplicates()">
Remove Duplicate
</button>
<script type="text/javascript">
function deleteDuplicates() {
// Create an array of objects
subjects = [{
title: "C++",
author: "Rohit Gautam"
}, {
title: "JAVA",
author: "Alok"
}, {
title: "Python",
author: "Ajit"
}, {
title: "JAVA",
author: "Alok"
}, {
title: "Python",
author: "Ajit"
}, {
title: "C++",
author: "Rohit Gautam"
}, ];
jsonObject = subjects.map(JSON.stringify);
console.log(jsonObject);
uniqueSet = new Set(jsonObject);
uniqueArray = Array.from(uniqueSet).map(JSON.parse);
console.log(uniqueArray);
}
</script>
</body>
</html>Output
