Remove blank attributes from a JavaScript Object

Remove blank attributes from a JavaScript object we have to check if the values are null or undefined and then delete the blank attributes with approaches mentioned below.

Removing Blank Attributes from a JavaScript Object

In this approach, we will iterate through the properties of the original object and create a new object, excluding any properties with values that are null or undefined.

Example: Here, the removeBlankAttributes function is used to create a new object (objectWithoutBlankAttributes) by excluding properties with null or undefined values from the original object. The resulting object only contains non-blank attributes.

Javascript

function removeBlankAttributes(obj) {
    const result = {};
    for (const key in obj) {
        if (obj[key] !== null && obj[key] !== undefined) {
            result[key] = obj[key];
        }
    }
    return result;
}

const originalObject = {
    name: 'John',
    age: null,
    city: 'New York',
    occupation: undefined,
};

const objectWithoutBlankAttributes = removeBlankAttributes(originalObject);
console.log(objectWithoutBlankAttributes);

Output

{ name: 'John', city: 'New York' }

Removing Null Values from an Object

This approach defines a function removeNullUndefined that directly modifies the original object by deleting properties with null or undefined values. It uses a for...in loop to iterate through the object’s properties and checks and deletes those properties with null or undefined values.

Example: Here, the removeNullUndefined function is applied directly to the sampleObject, modifying it by deleting properties with null or undefined values. After the operation, sampleObject contains only the properties with defined values.

Javascript

function removeNullUndefined(obj) {
    for (const key in obj) {
        if (obj[key] === null || obj[key] === undefined) {
            delete obj[key];
        }
    }
}

const sampleObject = {
    a: 1,
    b: null,
    c: 3,
    d: undefined,
};

removeNullUndefined(sampleObject);
console.log(sampleObject);

Output

{ a: 1, c: 3 }

Removing Null and Undefined Values from a Nested Object

The removeNestedNullUndefined function iterates through the properties of the object. If a property has a null or undefined value, it is deleted. If the property is an object, the function recursively calls itself to check and remove null or undefined values within nested objects.

Example: Here, the removeNestedNullUndefined function is applied to the nestedObject. It recursively removes properties with null or undefined values, including those within nested objects. The resulting nestedObject is cleaned from all null and undefined values.

Javascript

function removeNestedNullUndefined(obj) {
    for (const key in obj) {
        if (obj[key] === null || obj[key] === undefined) {
            delete obj[key];
        } else if (typeof obj[key] === 'object') {
            removeNestedNullUndefined(obj[key]);
        }
    }
}

const nestedObject = {
    a: 1,
    b: null,
    c: {
        d: 4,
        e: undefined,
        f: {
            g: null,
            h: 'hello',
        },
    },
};

removeNestedNullUndefined(nestedObject);
console.log(nestedObject);

Output

{ a: 1, c: { d: 4, f: { h: 'hello' } } }

Removing Null Values from an Object Using reduce()

The removeNullUndefinedWithReduce function uses the reduce() method and Object.entries() to iterate through the properties of the object. It creates a new object, excluding properties with null or undefined values. For nested objects, it recursively applies the same logic. This approach is functional and produces a new object without modifying the original one.

Example: Here, the removeNullUndefinedWithReduce function is used to create a new object (cleanedObject) by excluding properties with null or undefined values. The reduce() method is employed for a functional approach, and the resulting cleanedObject does not modify the original object. The cleaning process includes nested objects.

Javascript

function removeNullUndefinedWithReduce(obj) {
    return Object.entries(obj).reduce((acc, [key, value]) => {
        if (value !== null && value !== undefined) {
            acc[key] = typeof value === 'object' ? removeNullUndefinedWithReduce(value) : value;
        }
        return acc;
    }, {});
}

const objectWithNullUndefined = {
    a: 1,
    b: null,
    c: 3,
    d: undefined,
    e: {
        f: null,
        g: 'hello',
        h: undefined,
    },
};

const cleanedObject = removeNullUndefinedWithReduce(objectWithNullUndefined);
console.log(cleanedObject);

Output

{ a: 1, c: 3, e: { g: 'hello' } }