26-Apr-2023
.
Admin
If you need to see example of how to remove duplicate objects from javascript array. This tutorial will give you simple example of how to remove duplicates from an array of objects using javascript. step by step explain how to remove all duplicates from an array of objects. you can understand a concept of javascript: remove duplicate objects from array. Here, Creating a basic example of how to remove duplicates from an array of objects using javascript.
There are several ways to remove duplicate objects from a JavaScript array:
Example 1: Using Set and Spread operator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to remove duplicate objects from JavaScript array? - NiceSnippets.Com</title>
</head>
<body>
</body>
<script type="text/javascript">
const arr = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 1, name: 'John'}];
const uniqueArr = [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
console.log(uniqueArr); // [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}]
</script>
</html>
This method uses the Set object to create a new set of unique items by first mapping the original array into an array of stringified objects and then spreading it back into a new array.
Example 2: Using filter() method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to remove duplicate objects from JavaScript array? - NiceSnippets.Com</title>
</head>
<body>
</body>
<script type="text/javascript">
const arr = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 1, name: 'John'}];
const uniqueArr = arr.filter((item, index) => {
return index === arr.findIndex(obj => JSON.stringify(obj) === JSON.stringify(item));
});
console.log(uniqueArr); // [{id: 1, name:'John'}, {id: 2, name:'Jane'}]
</script>
</html>
This method uses the filter() method to iterate through each item in the original array and returns only those items that are not found in any previous index using findIndex() method.
Example 3: Using lodash library
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to remove duplicate objects from JavaScript array? - NiceSnippets.Com</title>
</head>
<body>
</body>
<script type="text/javascript">
const _ = require('lodash');
const arr = [{id: 1, name:'John'}, {id :2 ,name:'Jane'},{ id :1 ,name :'John'}];
const uniqueArr = _.uniqWith(arr , _.isEqual);
console.log(uniqueArr); // [{ id :1 ,name :'John'},{ id :2 ,name :'Jane'}]
</script>
</html>
This method uses the lodash library's uniqWith() function which takes an array and a comparator function as arguments and returns a new array of unique items. The comparator function is used to compare each item in the array with every other item to determine if they are equal.
#JavaScript
