Transforming a List of Items into a Hierarchical Tree Structure

Question

Transforming a List of Items into a Hierarchical Tree Structure

Seeking assistance with constructing a hierarchical tree structure from a flat list that contains categories and names. Various approaches have been attempted, including the function presented below.

The original flat list looks as follows:

var input = [
  {
    "Parent Category": "Agricultural Feed + Seed",
    Category: "Agricultural Feed + Seed",
    Name: "Agfinity"
  },
  ...
];

The desired tree structure based on the flat list is outlined below:

[
  {
    "label": "Agricultural Feed + Seed",
    "children": [
      {
        "label": "Agfinfity"
      },
      ...
    ]
  },
  ...
];

An existing function resembling the one provided attempts to achieve this conversion but may not be optimized.


function formatBrandNames(rawBrands) {
  // Function code here
}

Any advice or suggestions on improving the efficiency of this process would be greatly valued.

javascript arrays

Answer 1

Answer №1

The concept can be distilled down to

If the node lacks a parent category, it belongs to the root categories

Determine the Parent through its category, then include the node in the parent's children

In case the parent doesn't exist, create one.

 function convertToTree(nodes) {
   const roots = [];
   const categorizedByCategory = new Map();

   for(const { Name: label, ["Parent Category"]: parent, Category: category } of nodes) {
     const node = { label, children: [] };

     if(categorizedByCategory.has(category)) {
        categorizedByCategory.get(category).children.push(node);     
     } else {
         const categoryObject = {
           label: category,
           children: [node]
         };

         categorizedByCategory.set(category, categoryObject);

         if(parent === category) {
           roots.push(categoryObject);
        } else if(categorizedByCategory.has(parent)) {
           categorizedByCategory.get(parent).children.push(categoryObject);
        } else {
           categorizedByCategory.set(parent, { label: parent, children: [categoryObject] });
        }
     } 


   }

   return roots;
 }

Answer 2

The concept can be distilled down to

If the node lacks a parent category, it belongs to the root categories

Determine the Parent through its category, then include the node in the parent's children

In case the parent doesn't exist, create one.

 function convertToTree(nodes) {
   const roots = [];
   const categorizedByCategory = new Map();

   for(const { Name: label, ["Parent Category"]: parent, Category: category } of nodes) {
     const node = { label, children: [] };

     if(categorizedByCategory.has(category)) {
        categorizedByCategory.get(category).children.push(node);     
     } else {
         const categoryObject = {
           label: category,
           children: [node]
         };

         categorizedByCategory.set(category, categoryObject);

         if(parent === category) {
           roots.push(categoryObject);
        } else if(categorizedByCategory.has(parent)) {
           categorizedByCategory.get(parent).children.push(categoryObject);
        } else {
           categorizedByCategory.set(parent, { label: parent, children: [categoryObject] });
        }
     } 


   }

   return roots;
 }

Transforming a List of Items into a Hierarchical Tree Structure

Answer №1

Similar questions

Get the results of a MongoDB projection query in Javascript/Node.js by converting the output to

Add a fresh widget to the DOJO attachment point without overwriting

How can you center popup windows launched from the main window using jquery?

Could anyone clarify the concept of how a function is able to be equivalent to zero?

What is the best way to add stripes to a button for a colorful touch

Combine adjacent items in an array to streamline the list

What is the most efficient way to transfer substantial data from a route to a view in Node.js when using the render method

Steps for raising a unique error in an asynchronous callout

Error: JSON response is returning as undefined

Creating a carousel with three thumbnails arranged in two rows

Is there potentially a memory leak in this code? If there is, what steps can be taken to eliminate it?

Issues with displaying calendar items on the React timeline are only resolved after pressing F12 or resizing the

"Encountered a roadblock while attempting to utilize the applyMatrix

Encountering an unfamiliar group operator error '$group' in MongoDB

Retrieve webpage using HTML stored in web storage

While experimenting with p5.js, I encountered an issue where I received the error message stating that "loadAnimation is not defined and createSprite not defined." This problem persists even when using VSCode

Using Bootstrap4 tagsinput, removing a tag: detecting for AJAX fulfillment and then reversing the action

In JavaScript or jQuery, what is the most optimal method to swap out all instances of a specific string within the body content without altering the rest of the body text?

Retrieving a specific section of key values in a PHP array

There is nothing like Python Bottle when it comes to parsing JSON data from