Post
Ask Question

Remove Duplicates In Array Of Objects Using Jquery

Removing the duplicates in the array of the objects is always tricky and sometimes it can be more complex, when we are going with an array of array.

Recently, I came across the scenario, where the duplicate employees are pushing into the array, when some process is going on, so that I need to write a client side jQuery script to clean up the array; i.e.,  removing the duplicate entries.

Code 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://code.jquery.com/jquery-3.0.0.js" ></script>  
  7. </head>  
  8. <body>  
  9.     <script type="text/javascript">  
  10.         var Array = [{ "Name": "Bob Ross", "EmpID": "0441" },  
  11.             { "Name": "Ram", "EmpID": "0442" },  
  12.             { "name": "Bob Ross", "EmpID": "0441" },  
  13.             { "name": "Pradeep", "text": "0443" },  
  14.             { "name": "Ram", "text": "0442" }];  
  15.   
  16.         ArrayArray = Array.reduce(function (item, e1) {  
  17.             var matches = item.filter(function (e2)  
  18.             { return e1.EmpID == e2.EmpID});  
  19.             if (matches.length == 0) {  
  20.                 item.push(e1);  
  21.             }  
  22.             return item;  
  23.         }, []);  
  24.   
  25.         console.log(Array);  
  26.     </script>  
  27. </body>  
  28. </html>  
Result
 
 

There are many methods available to remove the duplicate values from an array but from the scenario I came across, I found this is the most efficient and generic way to work on it.

I hope you enjoyed this blog. Your valuable feedback, questions or comments about this blog are always welcome.
Next Recommended Reading Dynamically Adding And Removing TextBoxes On A Button Click Using jQuery