How to List Multi-Level Sub-Categories from an Array of Objects in JavaScript

Discover an effective way to transform a flat array of categories and sub-categories into a structured hierarchy for easy usage in dropdown menus. --- This video is based on the question https://stackoverflow.com/q/73530364/ asked by the user 'pooya' ( https://stackoverflow.com/u/14077040/ ) and on the answer https://stackoverflow.com/a/73530486/ provided by the user 'Cerbrus' ( https://stackoverflow.com/u/1835379/ ) 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: How to list multi level Sub-categories under their Categories if all the catgories are in the same array of objects? 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. --- How to List Multi-Level Sub-Categories from an Array of Objects in JavaScript Creating a dropdown menu that contains categories and their respective sub-categories can be a tricky task, especially when the data comes in a flat structure from a server. If you're faced with the challenge of transforming an array of categories into a multi-level format where sub-categories can themselves have sub-categories, you've come to the right place! This guide will guide you through an effective solution to achieve this in JavaScript. The Problem You have a straightforward array of category objects received from the server, structured by a parent_id that denotes whether each category is a main category or a sub-category. The challenge is to organize this data into a hierarchical format, allowing multiple levels of sub-categories to be nested within their parent categories. Example of Categories Array Here's how the incoming array from the server looks: [[See Video to Reveal this Text or Code Snippet]] Your expected output would be a new array structure that nests sub-categories properly beneath their respective parent categories. Expected Result You want the data to be restructured like this: [[See Video to Reveal this Text or Code Snippet]] The Solution To achieve this hierarchical structure, we can follow a systematic approach in JavaScript. We'll loop through the existing categories, grouping them by their parent categories and creating a nested structure accordingly. Below are the steps involved: Step 1: Assign Sub-Categories to Parents We will filter through the array to find categories that have a parent_id and assign them to their respective parent categories. [[See Video to Reveal this Text or Code Snippet]] Step 2: Filter Out Categories with Parents After the sub-categories have been assigned, the next step is to filter out the categories that are actually sub-categories. What remains should only include the main categories. [[See Video to Reveal this Text or Code Snippet]] Final Code Here's the complete code that puts together both steps mentioned above: [[See Video to Reveal this Text or Code Snippet]] Conclusion By following these steps, you can successfully transform a flat array of categories into a nested structure that supports multi-level sub-categories. This can be particularly useful for dropdown menus and similar UI components, making it easy for users to navigate through content. Happy coding!