Remove Empty Objects From An Array In JavaScript

To remove empty objects from an array in JavaScript –

  1. Use the filter() method and pass it a function.
  2. In the function, use Object.keys().length to see if the object is empty.
  3. The filter() method will filter out the array with non-empty objects.
remove empty objects from an array in javascript

Remove Empty Objects From An Array In JavaScript

If you have an array of objects and you want to remove the objects that are empty, you can use the filter() method. The filter() method accepts a function as an argument.

In the function, use Object.keys().length to see if the object is empty. If it is, then it will be removed from the array.

Here is an example:

var arr =

[{a: 1, b: 2, c: 3},

{d: 4, e: 5},

{}];

// remove empty objects from the array

var newArr = arr.filter(function(obj){

  return Object.keys(obj).length !== 0;

});

console.log(newArr);

Output

[{

a: 1,

b: 2,

c: 3

}, {

d: 4,

e: 5

}]

Note: The Object.keys() method returns an array of the object’s own property names, in the same order as we get with a normal loop.

If an object is empty, it will have no own properties. This means that Object.keys() will return an empty array.

There is a catch though. What if the array contains different types of Objects? Object.keys().length will return 0 for an empty array or even a number.

The above code will filter out arrays and numbers as well. If you just want to remove objects that are empty, you can use the below code:

var arr =

[‘a’,

{d: 4, e: 5},

{},

4,

[]];

// only remove objects that are truly empty

var newArr = arr.filter(function(obj){

if(obj && typeof obj === ‘object’ && !Array.isArray(obj) && Object.keys(obj).length === 0) {

  return false;

}else{

  return true;

}

});

console.log(newArr);

Output

[“a”, {d: 4, e: 5}, 4, []]

So, the above code will only remove objects that are truly empty. All other values will remain in the array.

You can also use a for loop to remove empty objects from an array. The idea is to iterate over the array and use the delete operator to remove elements that are empty.

Here is an example:

var arr =

[‘a’,

{d: 4, e: 5},

{},

4,

[]];

// using a for loop

for(var i = 0; i < arr.length; i++) {

if(typeof arr[i] === ‘object’ && !Array.isArray(arr[i]) && Object.keys(arr[i]).length === 0) {

  delete arr[i];

}

}

console.log(arr);

Output

[“a”, {d: 4, e: 5}, undefined, 4, []]

As you can see, the delete operator marks the empty object as undefined.

You can use the splice() method to remove undefined elements from an array. The splice() method modifies the array in-place and returns the removed elements.

Here is an example:

var arr =

[‘a’,

{d: 4, e: 5},

{},

4,

[]];

// using a for loop and splice() method

for(var i = 0; i < arr.length; i++) {

if(typeof arr[i] === ‘object’ && !Array.isArray(arr[i]) && Object.keys(arr[i]).length === 0) {

  arr.splice(i, 1);

  i--;

}

}

console.log(arr);

Output

[“a”, {d: 4, e: 5}, 4, []];

Thus, these are some of the ways you can remove empty objects from an array in JavaScript.

I hope this helped you. If you have any questions, please leave a comment below.

Happy coding! 🙂

Leave a Reply