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

"Troubleshooting a callback problem in jQuery involving JavaScript and AJAX

Converting Avro to JSON array format in NiFi with nested arrays

Clicking on Google Code Prettify does not trigger syntax highlighting

Package for running scripts in Node Package Manager

Which is quicker: loading JSON via Ajax or loading the entire output through Ajax?

The JQuery ajax post function is typically called towards the conclusion of a JavaScript script

Maintaining the proportions of images in different screen sizes when resizing

Tips for resolving the 'Bad request error' when trying to create a new Cloudant document with an attachment

What is the best way to isolate particular components of an argument and store them in separate variables?

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Tips for validating a session on a React client following a successful authentication via an Express session

pressing the switch will adjust the size of the container

Ajax - Retrieving data from a different webpage

Converting the HTTP response data from a Node server into a JSON file mapping

How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

Changing a single image within a v-for loop of images in Vue

TabPanel with Grid component causes Error: The server-rendered UI does not match the initial UI, resulting in failed hydration

Unlocking keys of JavaScript class prior to class initialization

Tips for determining the size and identifier of a newly appended element in jQuery?

In Vue, reactivity does not extend to nested child objects