How to Remove Null Objects from Nested Array of objects in JavaScript ? - Coding

Removing null objects from the nested array of objects can be done by iterating over the array, filtering out the null objects at each level, and then applying a recursive approach to remove all the null objects. This makes sure that all the levels of the nested structure are checked and the null objects are removed.

There are various approaches to Remove Null Objects from a Nested Array of objects in JavaScript

Table of Content

Using every Method
Using includes Method
Using reduce Method
Using Recursion and filter()
Using flatMap() Method
Using JSON.stringify() and JSON.parse()
Using forEach Method

Using every Method

Every method is used to iterate through each level of the nested array. At each level, every method checks if all elements pass a specified condition, excluding null objects, effectively filtering them out.

Syntax:

array.every(callback(element, index, array), thisArg)

Example: The below code uses every method to Remove Null Objects from a Nested Array of objects in JavaScript.

JavaScript

// Input arr
let arr = [
    { id: 1, values: [1, 2, 3] },
    { id: 2, values: [null, 5, 6] },
    { id: 3, values: [7, 8, 9] },
    { id: 4, values: [10, null, 12] },
];
// Removing null using every
let output = arr.filter((obj) => {
    return obj.values.every((value) => {
        return value !== null;
});
});

// Output
console.log(output);

Output

[ { id: 1, values: [ 1, 2, 3 ] }, { id: 3, values: [ 7, 8, 9 ] } ]

Using includes Method

Include method is used to filter out null objects from a nested array. By recursively applying includes to each level of the nested structure, null objects are excluded from the resulting array.

Syntax:

array.includes(searchElement, fromIndex)

Example: The below code uses includes a method to Remove Null Objects from a Nested Array of objects in JavaScript.

JavaScript

// Input arr
let arr = [
{ id: 1, values: [1, 2, 3] },
{ id: 2, values: [null, 5, 6] },
{ id: 3, values: [7, 8, 9] },
{ id: 4, values: [10, null, 12] },
];

// Removing null using includes
let output = arr.filter((obj) => {
return !obj.values.includes(null);
});

// Output
console.log(output);

Output

[ { id: 1, values: [ 1, 2, 3 ] }, { id: 3, values: [ 7, 8, 9 ] } ]

Using reduce Method

This approach uses the reduce method to recursively filter out null objects from a nested array of objects. The reduce function accumulates the non-null objects while traversing through each level of the nested structure.

Syntax:

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

Example: The below code uses a reduce method to Remove Null Objects from a Nested Array of objects in JavaScript.

JavaScript

// Input arr
let arr = [
    { id: 1, values: [1, 2, 3] },
    { id: 2, values: [null, 5, 6] },
    { id: 3, values: [7, 8, 9] },
    { id: 4, values: [10, null, 12] },
];

// Removing null using reduce
let output = arr.reduce((acc, obj) => {
    if (!obj.values.includes(null)) {
    acc.push({ ...obj });
    }
    return acc;
}, []);

// Output
console.log(output);

Output

[ { id: 1, values: [ 1, 2, 3 ] }, { id: 3, values: [ 7, 8, 9 ] } ]

Using Recursion and filter()

This approach involves defining a recursive function to traverse through the nested array of objects. At each level, the function filters out null objects and recursively calls itself on nested arrays of objects.

JavaScript

function removeNullObjects(arr) {
  return arr.filter(obj => {
    // If the object is null, remove it
    if (obj === null) {
      return false;
    }
    // If the object contains a nested array
    if (Array.isArray(obj.values)) {
      // Recursively remove null objects from the nested array
      obj.values = removeNullObjects(obj.values);
    }
    // Keep the object if it's not null
    return obj.values !== null;
  });
}

// Input array
let arr = [
  { id: 1, values: [1, 2, 3] },
  { id: 2, values: [null, 5, 6] },
  { id: 3, values: [7, 8, 9] },
  { id: 4, values: [10, null, 12] }
];

// Output
let output = removeNullObjects(arr);
console.log(output);

Output

[
  { id: 1, values: [ 1, 2, 3 ] },
  { id: 2, values: [ 5, 6 ] },
  { id: 3, values: [ 7, 8, 9 ] },
  { id: 4, values: [ 10, 12 ] }
]

Using flatMap() Method

The flatMap() method in JavaScript can be used to remove null objects from a nested array of objects by filtering out objects with null values and flattening the resulting array. It provides a concise and efficient solution for this task.

Syntax:

array.flatMap(callback(currentValue, index, array), thisArg)

Example:

JavaScript

let arr = [
    { id: 1, values: [1, 2, 3] },
    { id: 2, values: [null, 5, 6] },
    { id: 3, values: [7, 8, 9] },
    { id: 4, values: [10, null, 12] },
];

// Removing null using flatMap
let output = arr.map(obj => ({
    ...obj,
    values: obj.values.flatMap(value => value !== null ? [value] : [])
})).filter(obj => obj.values.length > 0);

console.log("Before:", arr);
console.log("After:", output);

Output

Before: [
  { id: 1, values: [ 1, 2, 3 ] },
  { id: 2, values: [ null, 5, 6 ] },
  { id: 3, values: [ 7, 8, 9 ] },
  { id: 4, values: [ 10, null, 12 ] }
]
After: [
  { id: 1, values: [ 1, 2, 3 ] },
  ...

Using JSON.stringify() and JSON.parse()

Another approach to removing null objects from a nested array of objects is to leverage JSON.stringify() and JSON.parse(). This method involves converting the array to a JSON string, filtering out null values in the process, and then parsing it back into an array. This approach can be particularly useful for deep nested structures as it simplifies the process of removing null values.

Example:

JavaScript

function removeNulls(obj) {
    return JSON.parse(JSON.stringify(obj, (key, value) => {
        // Filter out null values
        if (value === null) {
            return undefined;
        }
        return value;
    }));
}

const nestedArray = [
    { a: 1, b: null, c: [{ d: 2, e: null }, { f: 3 }] },
    { g: null, h: 4, i: { j: 5, k: null } },
    null,
    [{ l: 6, m: null }, null]
];

const cleanedArray = removeNulls(nestedArray);
console.log(cleanedArray);

Output

[
  { a: 1, c: [ [Object], [Object] ] },
  { h: 4, i: { j: 5 } },
  null,
  [ { l: 6 }, null ]
]

Using forEach Method

The forEach method can be used to iterate through each level of the nested array, removing null objects at each level. This method provides a straightforward way to clean up nested arrays of objects.

Example:

JavaScript

function removeNullObjects(arr) {
    const result = [];
    arr.forEach(obj => {
        if (obj !== null) {
            if (Array.isArray(obj.values)) {
                obj.values = obj.values.filter(value => value !== null);
            }
            result.push(obj);
        }
    });
    return result;
}

// Input array
let arr = [
    { id: 1, values: [1, 2, 3] },
    { id: 2, values: [null, 5, 6] },
    { id: 3, values: [7, 8, 9] },
    { id: 4, values: [10, null, 12] }
];


let output = removeNullObjects(arr);
console.log(output);

Output

[
  { id: 1, values: [ 1, 2, 3 ] },
  { id: 2, values: [ 5, 6 ] },
  { id: 3, values: [ 7, 8, 9 ] },
  { id: 4, values: [ 10, 12 ] }
]

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Article 200 of Indian Constitution \| Governor's Powers Over State Bills
Difference Between Next.js and Gatsby
Difference between Coercion and Undue Influence
Python List All Files In Directory And Subdirectories
Markov Models. Using R

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12