How to Remove Duplicates in JSON Array JavaScript ?

In JavaScript, removing duplicates from a JSON array is important for data consistency and efficient processing. We will explore three different approaches to remove duplicates in JSON array JavaScript.

Use the methods below to remove Duplicates in JSON Array JavaScript.

Using Set

In this approach, we use the Set object to automatically remove duplicates by converting the JSON array to a Set using map and JSON.stringify, then back to an array using Array. from and JSON.parse.

Example: The below example uses Set to remove duplicates in JSON array JavaScript.

let jArr = [{
    "id": 1,
    "title": "Introduction to Algorithms"
},
{
    "id": 2,
    "title": "Data Structures and Algorithms"
},
{
    "id": 1,
    "title": "Introduction to Algorithms"
},
{
    "id": 3,
    "title": "Dynamic Programming"
},
{
    "id": 2,
    "title": "Data Structures and Algorithms"
},
];
let res = Array.from(new Set(jArr.map(JSON.stringify)))
               .map(JSON.parse);
console.log(res);

[
  { id: 1, title: 'Introduction to Algorithms' },
  { id: 2, title: 'Data Structures and Algorithms' },
  { id: 3, title: 'Dynamic Programming' }
]

Using forEach Loop

In this approach, we are using a forEach loop to iterate over the JSON array "jArr", maintaining a check for unique id values using an object id, and adding only the unique objects to the result array res. This method makes sure that duplicate objects are excluded based on their "id" property, resulting in a filtered array containing only distinct elements.

Example: The below example uses forEach Loop to remove duplicates in JSON array JavaScript.

let jArr = [{
    "id": 1,
    "title": "Introduction to Algorithms"
},
{
    "id": 2,
    "title": "Data Structures and Algorithms"
},
{
    "id": 1,
    "title": "Introduction to Algorithms"
},
{
    "id": 3,
    "title": "Dynamic Programming"
},
{
    "id": 2,
    "title": "Data Structures and Algorithms"
},
];
let res = [];
let ids = {};
jArr.forEach(obj => {
    if (!ids[obj.id]) {
        ids[obj.id] = true;
        res.push(obj);
    }
});
console.log(res);

[
  { id: 1, title: 'Introduction to Algorithms' },
  { id: 2, title: 'Data Structures and Algorithms' },
  { id: 3, title: 'Dynamic Programming' }
]

Using filter Method

In this approach, we are using the filter method along with findIndex to create a new array "res" by checking for the first occurrence of each object based on its id and title properties, removing duplicates from the JSON array "jArr". This method ensures that unique objects are retained in the filtered array by comparing each object's ID and title values with previous elements.

Example: The below example uses the filter Method to remove duplicates in JSON array JavaScript.

let jArr = [{
    "id": 1,
    "title": "Introduction to Algorithms"
},
{
    "id": 2,
    "title": "Data Structures and Algorithms"
},
{
    "id": 1,
    "title": "Introduction to Algorithms"
},
{
    "id": 3,
    "title": "Dynamic Programming"
},
{
    "id": 2,
    "title": "Data Structures and Algorithms"
},
];
let res = jArr.filter((obj, index, self) =>
    index === self.findIndex((t) => (
        t.id === obj.id && t.title === obj.title
    ))
);
console.log(res);

[
  { id: 1, title: 'Introduction to Algorithms' },
  { id: 2, title: 'Data Structures and Algorithms' },
  { id: 3, title: 'Dynamic Programming' }
]