How to Filter Items from an Array by a Nested Property in JavaScript

Learn how to efficiently filter an array of objects in JavaScript based on a nested property value containing a specific string.
---
This video is based on the question https://stackoverflow.com/q/65621889/ asked by the user 'Manuel Abascal' ( https://stackoverflow.com/u/9884190/ ) and on the answer https://stackoverflow.com/a/65621918/ provided by the user 'Zack Heisenberg' ( https://stackoverflow.com/u/10461287/ ) 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: I'm trying to filter items from array by accessing a nested property & checking if it property value contains a certain string

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Filtering Items in an Array by a Nested Property in JavaScript

When dealing with arrays of objects in JavaScript, one common task is filtering items based on specific criteria. This can become straightforward or a bit complex, especially when you're working with nested properties. In this post, we will explore how to filter an array of objects by checking if a nested property contains a certain string. We'll use a real-world example to help clarify the approach.

The Problem

Imagine you have an array of issue objects for a project, and each object contains a fields property that itself has a summary. Your goal is to filter for items where the summary includes a specific word, such as Save. Here's a look at the array you'll be working with:

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

Attempting to Filter

You might try using the filter method to achieve this goal. Your initial attempt might look something like this:

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

However, you encountered an error stating that item.fields.includes is not a function. This is because fields is an object, not an array, and thus does not have an includes() method.

Diagnosing the Issue

Next, you attempted to wrap item.fields in square brackets to treat it like an array:

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

This returns an empty array. The problem is that you're trying to check if the entire fields object includes the string Save, which isn’t valid.

The Solution

To properly filter the items, you need to access the summary property within the fields object directly. This is where the core of the filtering happens.

Here’s the Correct Approach:

Instead of checking item.fields.includes, you want to check item.fields.summary.includes('Save'). This ensures you're looking at the right property of the object.

Here's the corrected code block:

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

Explanation of the Code:

issues.filter(...): This is the method that creates a new array with all elements that pass the test implemented by the provided function.

item => item.fields.summary.includes('Save'): This arrow function accesses the summary from each item.fields and checks if it includes the word Save.

Result

When you run the above line of code, it will return an array of objects that have Save in their summary property. For the example array, the resulting array would look like this:

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

Conclusion

Filtering arrays based on nested properties in JavaScript can be challenging if you don’t properly target the property you want to evaluate. By correctly accessing item.fields.summary and using the includes() method, you can easily filter your arrays to meet your specifications. This method ensures accurate and effective filtering and can be adapted for various other nested properties as well.

Feel free to reach out with any questions or share more examples to discuss additional filtering techniques!

Видео How to Filter Items from an Array by a Nested Property in JavaScript канала vlogize