Скачать или смотреть How to Filter Deep Nested Menu Arrays in JavaScript

Learn how to effectively filter deep nested menu arrays in JavaScript based on allowed menu strings while maintaining parent-child relationships.
---
This video is based on the question https://stackoverflow.com/q/62889256/ asked by the user 'Erez' ( https://stackoverflow.com/u/3143715/ ) and on the answer https://stackoverflow.com/a/62889490/ provided by the user 'Nina Scholz' ( https://stackoverflow.com/u/1447675/ ) 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: Filter deep nested menu array if menu name includes in allowed menu string array

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.
---
Filtering Deep Nested Menu Arrays in JavaScript

When working with complex menu structures in JavaScript, you may find yourself needing to filter out menus based on specific criteria. In particular, you might have an array of allowed menu names and want to return only the menus that fit within this allowed set—without discarding their parent nodes if they contain visible child nodes. This is exactly what we will tackle in today’s guide.

The Problem

Imagine you have the following menu structure:

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

And, you also have a list of allowed menu names:

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

You want to filter the routes effectively so that the result includes the dashboard route since its child, style_guide, is part of the allowed pages, while excluding others improperly.

The Solution

To achieve this, you can use the reduce method instead of filter. This approach allows you to build a new array without modifying the original one. Here’s how you can implement it step-by-step.

Step-by-Step Explanation

Define the Function: Create a function that will accept the routes and allowed pages.

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

Check Allowed Names: For each route object, check if its name is included in the allowed pages.

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

Handle Children: If the current route has children, recursively call getAllowed to filter them.

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

Return the Result: Finally, return the accumulated results.

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

Complete Code Example

Here’s how the complete implementation looks:

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

The Output

Running the above code will yield an output where the parent routes are preserved if they have children in the allowed pages. The result will look like:

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

Conclusion

Filtering deep nested menu arrays can be tricky, but using the reduce method allows for a quite elegant solution while preserving the parent-child relationships. By following the steps outlined above, you can easily adapt this approach to meet your specific needs. Happy coding!