Скачать или смотреть How to Properly Filter an Array of Objects in JavaScript: Removing Empty Values

Learn how to efficiently iterate through an array of objects in JavaScript and remove items with empty or null values. Perfect for frontend developers using Vue.js!
---
This video is based on the question https://stackoverflow.com/q/74434546/ asked by the user 'Tomas Gil Amoedo' ( https://stackoverflow.com/u/17655903/ ) and on the answer https://stackoverflow.com/a/74434735/ provided by the user 'Lucasbk38' ( https://stackoverflow.com/u/20480528/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Which would be the proper way to iterate this Array of objects and remove the ones with item.text = null || item.text = ''?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction: The Problem with Optional Fields in JavaScript Arrays

Handling dynamic data in your applications can be a challenge, especially when you're dealing with optional fields. This is particularly true when working with arrays of objects, like we often do in Vue.js for managing UI states. Suppose you have an array that represents contact information, with some fields being optional. If these fields are either null or empty strings (''), they should be filtered out before rendering. But what is the best way to accomplish this?

In this guide, we’ll look into a practical solution for removing items from an array of objects where certain conditions aren’t met—specifically when item.text is either null or an empty string. Let's dive in!

The Initial Scenario: An Array of Contact Info

Consider the following contactInfo array created in a computed property of a Vue.js setup:

[[See Video to Reveal this Text or Code Snippet]]

In this setup, each object in the array has an id, an icon, and a text field. The catch here is that all fields are optional, and some might return null or an empty string. Thus, the goal is to filter out objects whose text property isn't meaningful.

The Incorrect Filtering Approach

Initially, the following filtering logic was implemented:

[[See Video to Reveal this Text or Code Snippet]]

At first glance, this code appears to make sense—it seems we are attempting to filter out items without valid text. However, it returns all items, meaning the filtering isn't working as intended. Why?

The logical error here is that using the logical OR (||) means that as long as one condition is true, the entire expression evaluates to true. Thus, even if info.text is '' or null, the evaluation will still pass.

The Proper Way to Filter the Array

To correctly filter for meaningful text, we should instead utilize a more straightforward approach. We can use the fact that in JavaScript, falsy values (like null, undefined, 0, '', etc.) will evaluate to false in a conditional. Thus, a simple filter can be made just by testing if the item is truthy:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

Truthy Evaluation: By simply checking if info.text is truthy, we effectively filter out any object where text is null, undefined, or an empty string. This simplifies our logic this way:

If text has any valid value, it will be included in the filtered output.

If it is empty or null, it will be excluded.

Benefits of This Approach:

Simplicity: The logic is straightforward and easy to understand.

Efficiency: Fewer checks mean potentially less computational overhead.

Clarity: It reads like natural language, making it easy for others (or future you) to read and maintain.

Conclusion: Achieving Clean and Filtered Array Outputs

Filtering arrays effectively is crucial for delivering a satisfying user experience in applications. By understanding how JavaScript handles truthy and falsy values, we can write cleaner and more efficient code. By using the correct filter method, you can easily manage optional fields and ensure that only relevant data is rendered.

So, next time you face an issue with filtering arrays, remember to trust the power of truthy evaluations in JavaScript!