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
Selected Reading
Using methods of array on array of JavaScript objects?
JavaScript array methods work seamlessly with arrays of objects. These methods allow you to manipulate, search, and transform object arrays efficiently.
Basic Array Methods on Object Arrays
Common array methods like push(), pop(), and splice() work directly on arrays containing objects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Methods on Objects</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 16px;
font-weight: 500;
color: rebeccapurple;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Using Array Methods on JavaScript Objects</h1>
<div class="result" id="output"></div>
<button class="btn">Apply Array Methods</button>
<script>
let students = [
{ name: "Rohan", age: 22, rollNo: "A12" },
{ name: "Mohit", age: 12, rollNo: "B21" },
{ name: "Shawn", age: 18, rollNo: "C43" }
];
document.querySelector('.btn').addEventListener('click', () => {
let output = document.getElementById('output');
// Original array
output.innerHTML = '<strong>Original:</strong> ' + JSON.stringify(students) + '<br>';
// Remove last element
students.pop();
output.innerHTML += '<strong>After pop():</strong> ' + JSON.stringify(students) + '<br>';
// Add new element
students.push({ name: "Michael", age: 17, rollNo: "AC9" });
output.innerHTML += '<strong>After push():</strong> ' + JSON.stringify(students) + '<br>';
// Remove element at index 1
students.splice(1, 1);
output.innerHTML += '<strong>After splice(1,1):</strong> ' + JSON.stringify(students);
console.log('Final array:', students);
});
</script>
</body>
</html>
Advanced Array Methods with Objects
Methods like map(), filter(), and find() are particularly useful for object arrays:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Array Methods</title>
</head>
<body>
<h1>Advanced Array Methods on Objects</h1>
<div id="results"></div>
<button onclick="demonstrateMethods()">Run Examples</button>
<script>
function demonstrateMethods() {
let employees = [
{ name: "Alice", salary: 50000, department: "IT" },
{ name: "Bob", salary: 60000, department: "HR" },
{ name: "Charlie", salary: 75000, department: "IT" }
];
let results = document.getElementById('results');
// Extract names using map()
let names = employees.map(emp => emp.name);
results.innerHTML = '<strong>Names:</strong> ' + names.join(', ') + '<br>';
// Filter IT employees
let itEmployees = employees.filter(emp => emp.department === 'IT');
results.innerHTML += '<strong>IT Employees:</strong> ' + JSON.stringify(itEmployees) + '<br>';
// Find employee by name
let found = employees.find(emp => emp.name === 'Bob');
results.innerHTML += '<strong>Found Bob:</strong> ' + JSON.stringify(found);
}
</script>
</body>
</html>
Common Use Cases
| Method | Purpose | Example |
|---|---|---|
map() |
Extract specific properties | arr.map(obj => obj.name) |
filter() |
Find objects matching criteria | arr.filter(obj => obj.age > 18) |
find() |
Get first matching object | arr.find(obj => obj.id === 5) |
Conclusion
Array methods work naturally with object arrays, enabling powerful data manipulation. Use map() for transformation, filter() for selection, and basic methods like push()/pop() for simple operations.
Updated on: 2026-03-15T23:18:59+05:30
252 Views
Advertisements