September 10, 2021

How to Find Duplicate Elements in Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to find duplicate elements in array in javascript. It is common for an array to have duplicate elements because there is no built-in filter in arrays to avoid such a thing from happening.

There are various methods to get only duplicate elements from an array. We are going to use the filter() method and Set constructor to achieve our goal. This approach will not work if your array contains objects so make sure it only contains only strings or numbers.

In the following example, we have an array of names and upon click of a button, we only want to extract duplicate names and display them on the screen. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and ul). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Get Duplicates”.
The ul element is empty for now because we will populate it dynamically using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">  
  <title>Document</title>
</head>
<body>
  
  <div>
    <button>Get Duplicates</button>
    <ul></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

div {
    width: 20%;
    margin: auto;
}

button {
    padding: 10px;
    display: inline-block;
}

li {
    list-style: none;
    font-weight: bold;
    font-size: 20px;
    margin-left: -40px;        
}

Javascript

We have a global variable users and it holds an array of strings.
We have the addUsers() method which is responsible for populating our ul element.
In addUsers() method, we are simply looping through the users array and creating a template string with a bunch of li elements.
We are displaying that list in the ul element.
We have selected the button element using the document.querySelector() method and stored it in btnGet variable.
We have attached the click event listener to the button element.
In the event handler function, we are using the filter() method to find duplicate names and storing them in the usernames variable.
There is a possibility we might have duplicate names in the usernames array, so we are using the Set constructor to get rid of those duplicates. If you are okay with duplicates, then please avoid this step.
We are using Array.from() method to convert Set to an array and calling addUsers() method to update our list.

let users = ['Peter', 'Marks', 'John', 'James', 'Mary', 'James', 'Mary', 'James', 'Mary'];

function addUsers(usernames){
    let template = usernames.map(user => `<li>${user}</li>`).join('\n');
    document.querySelector('ul').innerHTML = template;
}

addUsers(users);

let btnGet = document.querySelector('button');

btnGet.addEventListener('click', () => {    
    let usernames = users.filter((user, index) => users.indexOf(user) != index);
    let set = new Set(usernames);
    usernames = Array.from(set);
    addUsers(usernames);
});

You May Also Like: