Remove Duplicates From Array Of Objects JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of remove duplicates from array of objects JavaScript, an array is a finite collection of homogenous elements.
If any array contains duplicate values, we can find and remove them by using JavaScript. In this tutorial, we are going to use different methods to remove duplicate elements.
- Reduce() method
- Filter() method
Step By Step Guide On Remove Duplicates From Array Of Objects JavaScript :-
Let’s understand both of the methods with an example.
Method 1
In this method, we are going to use reduce() method which is used to return a single value and executes a reducer function.
Let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title>remove duplicates from array of objects </title>
<style>
body {
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> remove duplicates from array of objects </h3>
<script>
const array = [
{id:1, name:'jack'},
{id:1, name:'mary'},
{id:3, name:'thomas'},
{id:4, name:'kim'},
{id:5, name:'john'},
{id:5, name:'arthur'},
] ;
const result = array.reduce((new_array, current) => {
let obj = new_array.find((item) => item.id === current.id);
if(obj) {
return new_array ;
}
return new_array.concat([current]);
},[]) ;
console.log(result) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- < h1 > tag used to add heading here.
- Created the < style > tag to add CSS to the HTML page.
- To add JavaScript Create a < script > tag.
- At first we have to create an array first with values.
- Using the reduce() method, inside it using find() method which returns the first element which satisfy the condition.
- Console.log() to display the array.
Method 2
In this method, we are going to use the filter() method. let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title>remove duplicates from array of objects </title>
<style>
body {
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> remove duplicates from array of objects </h3>
<script>
const Array = [ 'a' , 'b' , 'c', 'd' ,'e ','f', 'd'];
const newArray= Array.filter(( item ) => item !=='d')
console.log( newArray )
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- < h1 > tag used to add heading here.
- Created the < style > tag to add CSS to the HTML page.
- To add JavaScript Create a < script > tag.
- At first we have to create an array with values.
- Now create an new array, then use the filter method().
- Console.log() to display the array
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to remove duplicate objects from an array using JavaScript.
I hope this article on remove duplicates from array of objects JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
