Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set object property in an array true/false, whether the id matches with any id from another array of objects in JavaScript?
In JavaScript, you often need to compare two arrays of objects and set a property (like matches) to true or false based on whether their IDs match. This is useful for data processing, filtering, and UI state management.
An object in JavaScript is a collection of key-value pairs that represent properties and their values. Arrays are ordered lists that can store multiple values, including objects, and are accessed using numeric indices starting from 0.
Syntax
Basic array syntax:
const arrayName = [item1, item2, ...];
Method 1: Using reduce() and map()
The reduce() method processes array elements to create a single output value, while map() creates a new array by transforming each element. Together, they efficiently handle ID matching.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
let array1 = [
{"id": 1, "name": "bmw"},
{"id": 22, "name": "audi"},
{"id": 3, "name": "bullet"}
];
let array2 = [
{"id": 1, "name": "benz"},
{"id": 82, "name": "rx100"},
{"id": 3, "name": "bullet"}
];
// Create lookup object from array2
const idLookup = array2.reduce((acc, obj) => {
acc[obj.id] = true;
return acc;
}, {});
// Add matches property to array1
const result = array1.map(obj => ({
...obj,
matches: idLookup[obj.id] || false
}));
document.getElementById("result").innerHTML =
"<strong>Array 1:</strong> " + JSON.stringify(array1) + "<br><br>" +
"<strong>Array 2:</strong> " + JSON.stringify(array2) + "<br><br>" +
"<strong>Result:</strong> " + JSON.stringify(result);
</script>
</body>
</html>
Method 2: Using forEach() with find()
This approach uses loops to iterate through arrays and check for matching IDs:
<!DOCTYPE html>
<html>
<body>
<div id="result2"></div>
<script>
let cars1 = [
{ id: 5, car: 'cruze' },
{ id: 2, car: 'beats' },
{ id: 3, car: 'sail' }
];
let cars2 = [
{ id: 1, car: 'city' },
{ id: 80, car: 'verna' },
{ id: 3, car: 'electra' }
];
// Add matches property using forEach
cars1.forEach(item1 => {
item1.matches = cars2.some(item2 => item2.id === item1.id);
});
document.getElementById("result2").innerHTML =
"<strong>Result with forEach:</strong><br>" + JSON.stringify(cars1);
</script>
</body>
</html>
Method 3: Using includes() for Simple Arrays
When comparing against a simple array of IDs, use includes() method:
<!DOCTYPE html>
<html>
<body>
<div id="result3"></div>
<script>
let validIds = ["abc", "def", "ghi"];
let items = [
{ bike: "rx100", id: "abc" },
{ bike: "pulsar", id: "def" },
{ bike: "splendor", id: "xyz" }
];
// Add matches property using includes
const updatedItems = items.map(item => ({
...item,
matches: validIds.includes(item.id)
}));
document.getElementById("result3").innerHTML =
"<strong>Valid IDs:</strong> " + JSON.stringify(validIds) + "<br><br>" +
"<strong>Updated Items:</strong> " + JSON.stringify(updatedItems);
</script>
</body>
</html>
Performance Comparison
| Method | Time Complexity | Best For |
|---|---|---|
| reduce() + map() | O(n + m) | Large datasets |
| forEach() + some() | O(n × m) | Small datasets, readability |
| includes() | O(n × m) | Simple ID arrays |
Conclusion
Use reduce() with map() for optimal performance with large datasets. For smaller arrays or when code readability is priority, forEach() with some() works well. Choose includes() when comparing against simple ID arrays.
781 Views
