Filter away object in array with null values JavaScript

When working with arrays of objects, you often need to filter out objects with invalid or empty values. This is common when processing API responses or user data that may contain incomplete records.

Let's say we have an array of employee objects, but some have empty strings, null, or undefined values for the name field. We need to filter out these invalid entries.

Sample Data

Here's our employee data with some invalid entries:

let data = [{
    "name": "Ramesh Dhiman",
    "age": 67,
    "experience": 45,
    "description": ""
}, {
    "name": "",
    "age": 31,
    "experience": 9,
    "description": ""
}, {
    "name": "Kunal Dhiman",
    "age": 27,
    "experience": 7,
    "description": ""
}, {
    "name": "Raman Kumar",
    "age": 34,
    "experience": 10,
    "description": ""
}, {
    "name": "",
    "age": 41,
    "experience": 19,
    "description": ""
}, {
    "name": null,
    "age": 25,
    "experience": 3,
    "description": ""
}];

console.log("Original data length:", data.length);

Original data length: 6

Method 1: Basic Filter with Truthy Check

The simplest approach uses JavaScript's truthy evaluation to filter out empty strings, null, and undefined values:

const filterUnwanted = (arr) => {
    const required = arr.filter(el => {
        return el.name;
    });
    return required;
};

const filteredData = filterUnwanted(data);
console.log("Filtered data:");
console.log(filteredData);

Filtered data:
[
  { name: 'Ramesh Dhiman', age: 67, experience: 45, description: '' },
  { name: 'Kunal Dhiman', age: 27, experience: 7, description: '' },
  { name: 'Raman Kumar', age: 34, experience: 10, description: '' }
]

Method 2: Explicit Validation

For more control, explicitly check for null, undefined, and empty strings:

const filterWithValidation = (arr) => {
    return arr.filter(obj => {
        return obj.name !== null && 
               obj.name !== undefined && 
               obj.name !== "" && 
               obj.name.trim() !== "";
    });
};

const validatedData = filterWithValidation(data);
console.log("Validated data length:", validatedData.length);
console.log(validatedData);

Validated data length: 3
[
  { name: 'Ramesh Dhiman', age: 67, experience: 45, description: '' },
  { name: 'Kunal Dhiman', age: 27, experience: 7, description: '' },
  { name: 'Raman Kumar', age: 34, experience: 10, description: '' }
]

Method 3: Multiple Field Validation

You can also filter based on multiple fields simultaneously:

const filterMultipleFields = (arr) => {
    return arr.filter(obj => {
        return obj.name && obj.age && obj.experience;
    });
};

const multiFilteredData = filterMultipleFields(data);
console.log("Multi-field filtered count:", multiFilteredData.length);

Multi-field filtered count: 3

Comparison

Conclusion

Use the truthy check method for simple filtering, or explicit validation when you need to handle edge cases like whitespace-only strings. Both approaches effectively remove objects with invalid name values from your arrays.