In this tutorial, we will learn to extract unique objects from an array of objects by their properties. Sometimes, we need to filter objects from an array of objects based on specific properties.
For example, we have an id as the key that identifies the object. Therefore, we need to ensure that the array only contains a single object with a single id. If two or more objects contain the same primary key value, this can lead to problems with object unique identification.
Here we will learn different ways to filter all unique objects from an array based on specific properties.
Using maps and for loops
In JavaScript, Map can store unique key-value pairs. Furthermore, we can get any value from the Map using the Map's keys in O(1) time complexity. So, we will iterate over the array of objects and store the key-value pairs in a Map. Additionally, we will check if the Map contains an object with a specific property value; we will not add the object to the array of new objects.
grammar
You can use map to extract unique objects from an array by following the following syntax.
const employees = [
{ emp_id: 1, emp_name: "Shubham", emp_age: 22 },
{ emp_id: 1, emp_name: "Joe", emp_age: 23 },
];
var map = new Map();
for (let employee of employees) {
map.set(employee["emp_id"], employee);
}
var iteratorValues = map.values();
var uniqueEmployess = [...iteratorValues];
In the above syntax, we use mapping to store objects with unique emp_id.
algorithm
Step 1 - Create an object array containing multiple objects with duplicate emp_id.
Step 2 - Create a Map() object using the Map constructor.
Step 3 - Use a for-of loop to iterate through each object of the "employees" array.
Step 4 - For the map, use emp_id as the key and the entire object as the value. Within a for-of loop, use the Map object's set() method to set the object to the value of the emp_id key.
Step 5 - The map is an iterator. So, to get all the values of the iterator, apply values() method.
Step 6 - Copy all objects from iteratorValues to uniqueEmployees array using spread operator.
Step 7 - uniqueEmployees array contains all objects with unique emp_id, user can iterate over it to get object values.
Example
In the example below, we implement the algorithm for extracting unique objects by attributes using Map and for-of loop. We have created an array of employees containing four different objects with duplicate emp_id values and we are using the above algorithm to extract all the unique objects.
<html>
<body>
<h3 id="Extracting-the-unique-objects-by-the-emp-id-attribute-of-an-array-of-objects-using-the-i-Map-and-for-loop-i">Extracting the unique objects by the emp_id attribute of an array of objects using the <i> Map and for-loop. </i></h3>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// creating the array of employees, which contains multiple objects.
const employees = [
{ emp_id: 1, emp_name: "Shubham", emp_age: 22 },
{ emp_id: 2, emp_name: "Joe", emp_age: 23 },
{ emp_id: 2, emp_name: "Sam", emp_age: 62 },
];
var map = new Map();
for (let employee of employees) {
// setting up the employee object for unique emp_id value
map.set(employee["emp_id"], employee);
}
var iteratorValues = map.values();
var uniqueEmployess = [...iteratorValues];
for (let uniqueEmp of uniqueEmployess) {
output.innerHTML += "The new unique object values is </br>";
output.innerHTML += "emp_id :- " + uniqueEmp.emp_id +
", emp_name :- " + uniqueEmp.emp_name +
", emp_age :- " + uniqueEmp.emp_age +" </br> ";
}
</script>
</body>
</html>
Use array.filter() method and Map
We can use the filter() method to filter the values in the array. It takes a callback function as a parameter and filters the values based on the boolean value returned by the callback function.
Like the example above, we will use a map to store the attribute value and check if the map already contains the value. If so, we move on; otherwise, we add the values to the map and filter arrays.
grammar
Users can filter all objects with unique attribute values by following the following syntax.
var map = new Map();
let uniqueObjects = websites.filter((web) => {
if (map.get(web.website_name)) {
return false;
}
map.set(web.website_name, web);
return true;
});
algorithm
Step 1 - Create a map using a Map() object.
Step 2 - Use the filter() method to filter values from the array.
Step 3 - Pass the callback function as an argument to the filter method that takes the network as a parameter. The network is an object in the reference array.
Step 4 - Check if the map already contains website_name as a key, then continue by returning false from the callback function.
Step 5 - If the map does not contain website_name, add website_name and object to the map as key-value pairs and return true to filter them out in the uniqueObjects array.
Example
In this example, we use the filter() method to filter all website objects by website_name from the array. In the output, the user can observe that the filter() method returns only two objects containing unique website_names.
<html>
<body>
<h3 id="Extracting-the-unique-objects-by-the-website-name-attribute-of-an-array-of-objects-using-the-i-Map-and-filter-method-i">Extracting the unique objects by the website_name attribute of an array of objects using the <i> Map and filter() method. </i></h3>
<div id="output"></div>
<script>
let output = document.getElementById("output");
//creating the array of websites object. A single website can have multiple domains
const websites = [
{ website_name: "TutorialsPoint", domain: "tutorialspoint.com" },
{ website_name: "TutorialsPoint", domain: "qries.com" },
{ website_name: "Tutorix", domain: "tutorix.com" },
];
var map = new Map();
let uniqueObjects = websites.filter((web) => {
if (map.get(web.website_name)) {
return false;
}
// If website_name is not found in the map, return true.
map.set(web.website_name, web);
return true;
});
// iterating through the unique objects and printing its value
for (let web of uniqueObjects) {
output.innerHTML += "The new unique object values is </br>";
output.innerHTML += "website_name :- " + web.website_name +
", domain :- " + web.domain + " </br> ";
}
</script>
</body>
</html>
This tutorial teaches us two methods to extract unique objects through specific attribute values. We are using a map in both methods but using different iterator methods to iterate over the array of objects. Users can iterate over the array using a for-of loop or the filter() method.
The above is the detailed content of Extract unique objects from array of objects by property in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AMThe main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.
Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AMWhether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.
Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AMPython and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.
JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AMJavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.
JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AMJavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.
Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AMChoosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.
JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AMThe power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.
The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AMIntroduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Dreamweaver CS6
Visual web development tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Mac version
God-level code editing software (SublimeText3)
