Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to remove all blank objects from an Object in JavaScript?
The task at hand is to learn how to remove all blank objects from a JavaScript object. Let’s consider the following object −
const details =
{
name: 'John',
age: {},
marks: { marks: {} }
}
We need to remove the black objects above You can use forEach() along with typeof and delete to remove blank objects. Let’s dive into the article for getting better understanding on removing blank objects.
Using reduce()
A reducer function is run for each element of an array using the reduce() method. The function's total result is the only value that the reduce() method delivers. In the case of empty array elements, the reduce() method does not run the function. The original array is unaltered by the reduce() technique.
Syntax
Following is the syntax for reduce() −
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Example
In the following example, we are running the script using reduce() to remove the empty objects from an object.
<!DOCTYPE html>
<html>
<body>
<script>
let details = {
"company":"Tutorialspoint","school": '',"college": '',
"address": "kavuri incor9"
};
let result = Object.entries(details).reduce((a,[k,v]) => (v == '' ? a : (a[k]=v, a)), {});
document.write(JSON.stringify(result))
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an array printed on a webpage consisting of objects that contain values, and all the empty objects are removed.
Using forEach()
For each element in an array, the forEach() method performs the specified function once.
Syntax
Following is the syntax forEach() −
array.forEach(function(currentValue, index, arr), thisValue)
Example
Consider the following example, in which we use forEach() to remove empty objects from an object.
<!DOCTYPE html>
<html>
<body>
<script>
const vehicles = {
c: 'BENZ',
a: 'BMW',
r: '',
s: ''
};
Object.keys(vehicles).forEach(key => {
if(!vehicles[key])
delete vehicles[key]
});
document.write(JSON.stringify(vehicles))
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the array that was printed, consisting of objects that contain values on the webpage.
Example
Let’s look at the following example, here we are running the script using the spread syntax and forEach() for removing the empty objects from the object.
<!DOCTYPE html>
<html>
<body>
<script>
let bikes = {
bike1: "Rx100",
bike2: '',
bike3: '',
bike4: "vespa"
};
let removeobj = {};
Object.keys(bikes).forEach(val => {
const newVal = bikes[val];
removeobj = newVal ? { ...removeobj,
[val]: newVal
} : removeobj;
});
document.write(JSON.stringify(removeobj));
</script>
</body>
</html>
When the script gets executed, the output window will pop up, triggering the event and displaying an array consisting of objects with values on the webpage.
2K+ Views
