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
How to assign values to an array with null/empty objects in JavaScript?
In JavaScript, you can assign values to an array containing null or empty objects using various methods. This is useful when you need to populate placeholder objects with actual data.
Method 1: Using forEach() with Object.keys()
This approach iterates through an array of empty objects and assigns properties from a source object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assign Values to Empty Objects</title>
</head>
<body>
<h2>Assign values to an array with null/empty objects</h2>
<button id="assignBtn">Assign Values</button>
<div id="result"></div>
<script>
let obj = {
firstName: "Rohan",
lastName: "Sharma",
address: "Delhi"
};
let arrObj = [{}, {}, {}];
document.getElementById("assignBtn").addEventListener("click", () => {
arrObj.forEach((item, index) => {
let keys = Object.keys(obj);
if (keys[index]) {
item[keys[index]] = obj[keys[index]];
}
});
console.log("Updated array:", arrObj);
document.getElementById("result").innerHTML =
"<p>Check console for output. Array updated successfully!</p>";
});
</script>
</body>
</html>
Updated array: [
{ firstName: "Rohan" },
{ lastName: "Sharma" },
{ address: "Delhi" }
]
Method 2: Direct Property Assignment
You can directly assign values to empty objects in the array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct Assignment</title>
</head>
<body>
<h2>Direct Property Assignment</h2>
<button id="directBtn">Assign Directly</button>
<div id="output"></div>
<script>
let emptyArray = [{}, {}, {}];
document.getElementById("directBtn").addEventListener("click", () => {
// Assign different properties to each object
emptyArray[0].name = "John";
emptyArray[1].age = 25;
emptyArray[2].city = "New York";
console.log("Direct assignment result:", emptyArray);
document.getElementById("output").innerHTML =
"<p>Values assigned directly. Check console!</p>";
});
</script>
</body>
</html>
Direct assignment result: [
{ name: "John" },
{ age: 25 },
{ city: "New York" }
]
Method 3: Using Object.assign()
Object.assign() can merge properties from source objects into empty objects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.assign() Method</title>
</head>
<body>
<h2>Using Object.assign()</h2>
<button id="assignObjBtn">Use Object.assign</button>
<div id="assignResult"></div>
<script>
let nullArray = [null, {}, {}];
let sourceData = [
{ id: 1, type: "user" },
{ id: 2, type: "admin" },
{ id: 3, type: "guest" }
];
document.getElementById("assignObjBtn").addEventListener("click", () => {
// Replace null/empty objects with actual data
nullArray = nullArray.map((item, index) => {
return Object.assign(item || {}, sourceData[index]);
});
console.log("Object.assign result:", nullArray);
document.getElementById("assignResult").innerHTML =
"<p>Objects merged successfully. Check console!</p>";
});
</script>
</body>
</html>
Object.assign result: [
{ id: 1, type: "user" },
{ id: 2, type: "admin" },
{ id: 3, type: "guest" }
]
Key Points
- forEach() - Good for iterating and assigning properties individually
- Direct assignment - Simple for known properties and positions
- Object.assign() - Useful for merging multiple properties at once
- Handle
nullvalues carefully usingitem || {}to avoid errors
Conclusion
These methods provide flexible ways to populate empty or null objects in arrays. Choose forEach() for property-by-property assignment, direct assignment for simple cases, or Object.assign() for merging complete objects.
Updated on: 2026-03-15T23:18:59+05:30
972 Views
Advertisements