How to Remove Duplicates from an Array of Objects in JavaScript?
This article focuses on removing duplicate object elements from the JavaScript array. We are provided with an array of objects, and our goal is to eliminate duplicate objects from the list.
These are the methods to solve this problem which are discussed below:
Table of Content
- Using One of the keys as Index
- Converting Array to Set and Remove Duplicates
- Using filter() and includes() Methods
- Using filter() and findIndex() Methods
- Using Lodash _.uniq() Method
Method 1: Using One of the keys as Index
- A temporary array is created that stores the objects of the original array using one of its keys as the index.
- Any 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.
Example: This example is the implementation of the above-explained method.
function removeDuplicates() {
// Create an array of objects
books = [
{ title: "C++", author: "Bjarne" },
{ title: "Java", author: "James" },
{ title: "Python", author: "Guido" },
{ title: "Java", author: "James" },
];
// Declare a new array
let newArray = [];
// Declare an empty object
let uniqueObject = {};
// Loop for the array elements
for (let i in books) {
// Extract the title
objTitle = books[i]['title'];
// Use the title as the index
uniqueObject[objTitle] = books[i];
}
// Loop to push unique object into array
for (i in uniqueObject) {
newArray.push(uniqueObject[i]);
}
// Display the unique objects
console.log(newArray);
}
removeDuplicates();
Output
[
{ title: 'C++', author: 'Bjarne' },
{ title: 'Java', author: 'James' },
{ title: 'Python', author: 'Guido' }
]
Method 2: Converting Array to Set and Remove Duplicates
- A Set object holds only unique values of any type. This property can be used to store only the objects that are unique in the array.
- Each object of the array is first converted into a JSON-encoded string using the JSON.stringify method.
- The JSON-encoded string is then mapped to an array using the map() method. A new set is created by passing this array to the new set constructor.
- This step will remove all the duplicate elements as the JSON-encoded strings will be the same for the same elements.
- The set is then converted to an Array using the from() method, passing the set as a parameter. This array will not have duplicated objects.
Example: In this example, we will remove the duplicate values from an array of objects by converting the array to a set to remove the duplicates.
function removeDuplicates() {
// Create an array of objects
books = [
{ title: "C++", author: "Bjarne" },
{ title: "Java", author: "James" },
{ title: "Python", author: "Guido" },
{ title: "Java", author: "James" },
];
jsonObject = books.map(JSON.stringify);
uniqueSet = new Set(jsonObject);
uniqueArray = Array.from(uniqueSet).map(JSON.parse);
console.log(uniqueArray);
}
removeDuplicates();
Output
[
{ title: 'C++', author: 'Bjarne' },
{ title: 'Java', author: 'James' },
{ title: 'Python', author: 'Guido' }
]
Method 3: Using filter() and includes() Methods
In this method, we will filter the data from the book and include the data which is not repeated in a new array.
Example: This example is the implementation of the above-explained method.
const books = [
{ title: "C++", author: "Bjarne" },
{ title: "Java", author: "James" },
{ title: "Python", author: "Guido" },
{ title: "Java", author: "James" },
];
const ids = books.map(({ title }) => title);
const filtered = books.filter(({ title }, index) =>
!ids.includes(title, index + 1));
console.log(filtered);
Output
[
{ title: 'C++', author: 'Bjarne' },
{ title: 'Python', author: 'Guido' },
{ title: 'Java', author: 'James' }
]
Method 4: Using filter() and findIndex() Methods
In this method, we will filter() the array by using the Array.findIndex() method to return the first index of the element in a given array that satisfies the provided testing function (passed in by the user while calling)
Example: This example is the implementation of the above-explained method.
const books = [
{ title: "C++", author: "Bjarne" },
{ title: "Java", author: "James" },
{ title: "Python", author: "Guido" },
{ title: "Java", author: "James" },
];
const unique = books.filter((obj, index) => {
return index === books.findIndex(o => obj.title === o.title);
});
console.log(unique);
Output
[
{ title: 'C++', author: 'Bjarne' },
{ title: 'Java', author: 'James' },
{ title: 'Python', author: 'Guido' }
]
Method 5: Using Lodash _.uniq() Method
In this method, we are using _.uniq() method which returns the unique value present in the given array.
Example: This example is the implementation of the above-explained method.
// Requiring the lodash library
const _ = require("lodash");
// Use of _.uniq()
// method
let arr = _.uniq([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// Printing the output
console.log(arr);
Output:
[{ 'x': 1 }, { 'x': 2 }]
Contact Us