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?

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

remove duplicate
Please follow and like us:

Tagged in:

,