How to remove duplicates from an array of objects using JavaScript ?

25 Sep, 2019
Given an array of objects and the task is to remove the duplicate object element from the array list. There are two methods to solve this problem which are discussed below:
Method 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.
Example:
<!DOCTYPE html><html>  <head>    <title>        How to remove duplicates from an        array of objects using JavaScript ?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </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="removeDuplicates()">        Click here    </button>          <script type="text/javascript">              function removeDuplicates() {                  // Create an array of objects            books = [                { title: "C++", author: "Bjarne" },                { title: "Java", author: "James" },                { title: "Python", author: "Guido" },                { title: "Java", author: "James" },            ];                          // Display the list of array objects            console.log(books);                  // 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);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Method 2: Converting the array to a Set to remove the 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 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:
<!DOCTYPE html><html>  <head>    <title>        How to remove duplicates         from an array of objects?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </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="removeDuplicates()">        Click here    </button>          <script type="text/javascript">                  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);                  console.log(jsonObject);                  uniqueSet = new Set(jsonObject);            uniqueArray = Array.from(uniqueSet).map(JSON.parse);                  console.log(uniqueArray);        }    </script></body>  </html>
Output:
Output:
After clicking the button:
javascript-array
javascript-object
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?