Remove Empty or Null Values from Array in JavaScript

Apr 26, 2024 | jQuery Javascript


Hello Dev,

"Are you seeking to remove empty or null values from an array in JavaScript? You're in the right place. I'll demonstrate how to eliminate empty values from a string array using jQuery. Below is a brief example of removing null values from an array using jQuery's filter function.

We'll utilize the jQuery array filter function to remove empty or null values. Within the filter function, we'll only return values if they are not empty or null strings.

To remove empty or null values from an array in JavaScript, you can utilize the filter() method. This method creates a new array with all elements that pass the test implemented by the provided function. In the context of removing empty or null values, you can use a simple function that checks if the element is truthy. This approach will filter out all falsy values, including empty strings (""), null, undefined, 0, false, and NaN.

Here's a straightforward example demonstrating how to remove empty or null values from an array:

Read Also: Laravel Admin Panel: Direct Database Backup Download Example:
<!DOCTYPE html>
<html>
<head>
    <title>Remove Empty or Null Values from Array in JavaScript - ITErrorSolution.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
   
    <h1>Remove Empty or Null Values from Array in JavaScript - ITErrorSolution.com</h1>

<script type="text/javascript">
    let myArray = ['One', undefined, 'Two', '', null, 'Four', '', '', 'Five'];

    // Using filter to remove empty or null values
    myArray = myArray.filter(item => item);

    console.log(myArray); // Output: ['One', 'Two', 'Four', 'Five']
</script>
   
</body>
</html>

This code snippet uses the filter() method to iterate over each element in myArray. The callback function passed to filter() returns true for all elements that are truthy, effectively excluding empty strings, null, undefined, 0, false, and NaN from the new array.

For more complex scenarios where you might want to preserve certain falsy values (e.g., 0 or false), you can adjust the condition within the filter() method accordingly. For example, to keep 0 but remove all other falsy values, you could use:

Read Also: jQuery AJAX Autocomplete with Chosen Library in PHP Example:
<!DOCTYPE html>
<html>
<head>
    <title>Remove Empty or Null Values from Array in JavaScript - ITErrorSolution.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <h1>Remove Empty or Null Values from Array in JavaScript - ITErrorSolution.com</h1>
   
<script type="text/javascript">
    let values = [0, 1, 0.0, 1.0, '0', '1', true, false, '', null, undefined];

    // Keep numeric 0, remove all other empty values
    console.log(values.filter(x => [0].includes(x) || x));
</script>
   
</body>
</html>

This approach uses the includes() method to specifically check for 0 and allows all other truthy values to pass through the filter.

In summary, the filter() method is a powerful tool for removing empty or null values from arrays in JavaScript, offering flexibility to adjust the criteria for what constitutes an "empty" or "null" value based on your specific needs.

Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!



Tags :
#jQuery
#Javascript
ItErrorSolution.com

ItErrorSolution.com

"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"