Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 16 Dec, 2022
Improve Article
Save Article

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 an index

A temporary array is created that 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: In this example, we will remove the duplicate values from an array of objects using one of the keys as an index.

html




<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>

Output:

 Remove duplicates from an array of objects

 Remove duplicates from an array of objects 

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 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.

html




<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>

Output:

 Remove duplicates from an array of objects

 Remove duplicates from an array of objects 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!