How To Remove Empty Objects From An Array In Javascript

There are many ways to check if an object is empty. Today, I will show you some interesting ways to check an object and combine it with built-in methods to remove empty objects from an array in Javascript. Follow the tutorial below to understand how we do it.

Remove empty objects from an array in Javascript

After learning how to check for empty objects, we found some very useful and interesting ways, which are very important in our tutorial. Follow the tutorial below to understand how we do it.

Use filter() and Object.keys() methods

filter() method

The method will iterate through each array element, check which elements match, and return an array containing those elements.

Syntax:

array.filter(function(value, index, arr), thisValue);

Parameters:

• function: this function will filter the values
  • value: current element of array
  • index: element’s position
  • arr: array calls this method
• thisValue: This value will be passed if the parameter is empty 

Object.keys() method

This method will return an array of keys.

Syntax:

Object.keys(obj)

Parameter:

    obj: object

Example:

var arrayNew = [{}, { id: 1 }, {}, 1, "a" , []];
var result = [];

result = arrayNew.filter((item) => {
	// Check empty object
	if (item.constructor === Object && Object.keys(item).length === 0) {
		return false;
	} else {
		return true;
	}
});

// Check object empty
console.log("Result: ", result);

Output:

Result:  (4) [{id: 1}, 'a', 1, Array(0)]

We first filter through the elements of the array using the filter() method. Then check if the Object is empty by a combination of checking if item.constructor is an Object and the length is Zero. If it is Object and Zero then the element is an empty object. We will then remove those empty object elements by returning false. The array will receive values when the elements are returned true.

Use JSON.stringify() and filter() method

In this second way, I will check for an empty object in another way. This way it will be exciting for you.

JSON.stringify()

Convert to JSON string

Syntax:

JSON.stringify(value)

Parameter:

    value: value you want to convert to JSON string

Example:

var arrayNew = [{}, { id: 1 }, {}, "a", 1, []];
var result = [];

result = arrayNew.filter((item) => {
	// Check empty object
	if (JSON.stringify(item) === "{}") {
		return false;
	} else {
		return true;
	}
});

console.log("Result: ", result);

Output:

Result:  (4) [{id: 1}, 'a', 1, Array(0)]

To remove empty objects from an array in Javascript, we check if the object is empty by converting it to a JSON string and comparing it to ‘{}’, a JSON string representing the Object data type. If the object is empty, we will return false, so the filter() method removes them.

Use JSON.stringify() and splice() method

splice() method

This method can delete 1 or more words and replace and add elements.

Syntax:

splice(start, deleteCount, item1, item2, itemN)

Parameters:

•   start: location to delete, replace or add
•   deleteCount: number of deleted elements
•   item1,…,itemN: The element added to the array with a start added value from “start”. The method removes the element from the array if there is no element.

Example:

var arrayNew = [{}, { id: 1 }, {}, "a", 1, []];

for (let index = 0; index < arrayNew.length; index++) {
	// Check empty object
	if (JSON.stringify(arrayNew[index]) === "{}") {
		arrayNew.splice(index, 1);
	}
}

console.log("Result: ", arrayNew);

Output:

Result:  (4) [{id: 1}, 'a', 1, Array(0)]

After checking if the object is empty in the same way as above, we remove them using the splice method to remove them from the array.

Summary

Our tutorial has shown you the three most accessible and straightforward ways to remove empty objects from an array in Javascript. If you want to see more tutorials like this follow us, we have lots of detailed and easy-to-understand tutorials for you. The articles we create are beneficial for you.

Maybe you are interested:

• Get an Object’s Values as Array in JavaScript
• Filter an Array of Objects based on a property in JavaScript
• Sort an Array of Objects by Boolean property in JavaScript

Tom Joseph

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.

Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css