Creating a hierarchical tree structure from tabular data with JavaScript ECMAScript 6

Question

Creating a hierarchical tree structure from tabular data with JavaScript ECMAScript 6

Seeking a JavaScript algorithm utilizing ECMAScript 6 features to efficiently convert JSON table data into a JSON tree structure. This approach should not employ the traditional recursive algorithm with ES5, but rather emphasize a functional programming methodology.

Original Table Data:

[
   {
      "Children":"4th Grand Father"
   },
   {
      "Name":"4th Grand Father",
      "Children":"3rd Grand Father"
   },
   {
      "Name":"3rd Grand Father",
      "Children":"2nd Grand Father"
   },
   {
      "Name":"2nd Grand Father",
      "Children":"Grand Father"
   },
   {
      "Name":"Grand Father",
      "Children":"Father"
   },
   {
      "Name":"Grand Father",
      "Children":"Uncle"
   },
   {
      "Name":"Uncle",
      "Children":"Cousin"
   },
   {
      "Name":"Father",
      "Children":"Brother"
   },
   {
      "Name":"Father",
      "Children":"Me"
   }
]

Converted Tree Data:

[
  {
    "Name": "4th Grand Father",
    "Children": [
      {
        "Name": "3rd Grand Father",
        "Children": [
          {
            "Name": "2nd Grand Father",
            "Children": [
              {
                "Name": "Grand Father",
                "Children": [
                  {
                    "Name": "Father",
                    "children": [
                      {
                        "Name": "Brother"
                      },
                      {
                        "Name": "Me"
                      }
                    ]
                  },
                  {
                    "Name": "Uncle",
                    "children": [
                      {
                        "Name": "Cousin"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

javascript json ecmascript-6 hierarchical-data

Answer 1

Answer №1

If you're looking for a solution using ES6 features like arrow functions, destructured argument assignment, and the Map, then this code snippet might be helpful:

const makeTree = (data) => {
    const hash = data.reduce( (acc, {Name, Children}) => 
        acc.set(Name, (acc.get(Name) || []).concat(Children)) 
    , new Map );

    const recurse = (Name) => hash.has(Name)
            ?   { Name, Children: hash.get(Name).map(recurse) }
            :   { Name };
    return recurse(undefined).Children;
}

// Sample data
const data = [
   {
      "Children":"4th Grand Father"
   },
   {
      "Name":"4th Grand Father",
      "Children":"3rd Grand Father"
   },
   // Additional sample data goes here...
];

const result = makeTree(data);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Explanation:

The hash variable is created using a Map, storing the data based on the key being the Name property. If a key already exists, the child is added to the array of children for that key. Recursion is used to build the tree structure starting from the top.

The end result is an object with a Children property that contains the desired hierarchical data.

Answer 2

If you're looking for a solution using ES6 features like arrow functions, destructured argument assignment, and the Map, then this code snippet might be helpful:

const makeTree = (data) => {
    const hash = data.reduce( (acc, {Name, Children}) => 
        acc.set(Name, (acc.get(Name) || []).concat(Children)) 
    , new Map );

    const recurse = (Name) => hash.has(Name)
            ?   { Name, Children: hash.get(Name).map(recurse) }
            :   { Name };
    return recurse(undefined).Children;
}

// Sample data
const data = [
   {
      "Children":"4th Grand Father"
   },
   {
      "Name":"4th Grand Father",
      "Children":"3rd Grand Father"
   },
   // Additional sample data goes here...
];

const result = makeTree(data);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Explanation:

The hash variable is created using a Map, storing the data based on the key being the Name property. If a key already exists, the child is added to the array of children for that key. Recursion is used to build the tree structure starting from the top.

The end result is an object with a Children property that contains the desired hierarchical data.

Creating a hierarchical tree structure from tabular data with JavaScript ECMAScript 6

Answer №1

Explanation:

Similar questions

The optional attribute feature in Angular directives

Issue with offset calculation in bootstrap table occurs when the bootstrap-table is closed and the window is resized

Effectively importing a sizable dataset of Amazon product reviews into MongoDB with the help of Apache Spark

Every time I hit the refresh button, I find myself forcefully logged out

Is there a way to retrieve the properties of another function within the same component?

Postman Guide: Mastering the Evaluation of JSON Arrays

Adjust the start and end dates of the Bootstrap datepicker according to the chosen value

Suggestions for a JavaScript tool that automatically crops images

Struggles with fading in and out

Aligning text vertically to the top with material UI and the TextField component

What steps are needed to retrieve information from a website in an Android app following the input of personal information through the registration process?

using jquery to fill in fields in a table form

Integrate CSS and JavaScript files into Node Express

Deleting an entry from a JSON file by comparing keys within the same array using the jq tool

Converting an image to base64 format for storing in localStorage using Javascript

Tips for displaying a setCustomValidity message or tooltip without needing to submit the event

Using Axios in Vuejs to prompt a file download dialog

Interop-require-default is nowhere to be found in the babel-runtime

Hide the scrollbars on the sidebar

Creating an embedded link to a website that adjusts to different screen sizes while also dynamically changing