Building a hierarchical JSON structure from a string hierarchy

Question

Building a hierarchical JSON structure from a string hierarchy

These 4 variables represent different players and their teams:

var player1 = {name:'ronaldo', team: 'europe/spain/realmadrid'}
var player2 = {name:'messi', team: 'europe/spain/barcelona'}
var player3 = {name:'gerald', team: 'europe/england/liverpool'}
var player4 = {name:'unknown english', team: 'europe/england'}

The goal is to create a JSON tree structure that organizes the information hierarchically based on region and team:

{
    "text":"europe",
    "leaf":false,
    "children":[
        {
            "text":"spain",
            "leaf":false,
            "children":[
                {
                    "text":"realmadrid",
                    "leaf":false,
                    "children":[
                        {
                            "text":"ronaldo",
                            "leaf":true
                        }
                    ]
                },
                {
                    "text":"barcelona",
                    "leaf":false,
                    "children":[
                        {
                            "text":"messi",
                            "leaf":true
                        }
                    ]
                }
            ]
        },
        {
            "text":"england",
            "leaf":false,
            "children":[
                {
                    "text":"unknown english",
                    "leaf":true
                },
                {
                    "text":"liverpool",
                    "leaf":false,
                    "children":[
                        {
                            "text":"gerald",
                            "leaf":true
                        }
                    ]
                }
            ]
        }
    ]
}

javascript json tree hierarchy

Answer 1

Answer №1

If el1-el4 were combined into a single object, such as:

var data = []
data[0] = {name:'ronaldo', team: 'europe/spain/realmadrid'}
data[1] = {name:'messi', team: 'europe/spain/barcelona'}
data[2] = {name:'gerald', team: 'europe/england/liverpool'}
data[3] = {name:'unknown english', team: 'europe/england'}

You could easily loop through them when processing.

It's important to consider why this needs to be stored as a JSON Tree. The structure is complex with different types of nodes - continents, countries, teams, and players. It might be more effective to convert it into a fielded structure first before generating the tree.

Edit: After further consideration, something like this might work better:

var data = [];
data[0] = {name:'ronaldo', team: 'europe/spain/realmadrid'};
data[1] = {name:'messi', team: 'europe/spain/barcelona'};
data[2] = {name:'gerald', team: 'europe/england/liverpool'};
data[3] = {name:'unknown english', team: 'europe/england'};

var tree = {};
function fillTree(name, steps) {
   let current = null;
   for (let y = 0; y < steps.length; y++) {
      if (y == 0) {
         if (!tree.children || typeof tree.children == 'undefined'){
            tree = { text: steps[y], leaf: false, children: [] };
         }
         current = tree.children;
      } else {
         current.push({ text: steps[y], leaf: false, children: [] })
         current = current[current.length - 1].children;
      }
   }
   current.push({ text: name, leaf: true })
}

for (let x = 0; x < data.length; x++) {
  steps = data[x].team.split('/');
  fillTree(data[x].name, steps)
}

This implementation creates a JavaScript object. Conversion to JSON can be done at your discretion.

Update:

A revised FillTree function that prevents duplicate entries:

var tree = {};
function fillTree(name, steps) {
   let current = null,
   existing = null,
   i = 0;
   for (let y = 0; y < steps.length; y++) {
      if (y == 0) {
         if (!tree.children || typeof tree.children == 'undefined'){
            tree = { text: steps[y], leaf: false, children: [] };
         }
         current = tree.children;
      } else {
         existing = null;
         for (i = 0; i < current.length; i++) {
            if (current[i].text === steps[y]) {
               existing = current[i];
               break;
            }
         }
         if (existing) {
            current = existing.children;
         } else {
            current.push({ text: steps[y], leaf: false, children: [] });
            current = current[current.length - 1].children;
         }
      }
   }
   current.push({ text: name, leaf: true })
}

To convert this object to JSON, you can use JSON.stringify(tree), although support may vary (JavaScript JSON Page).

Answer 2

If el1-el4 were combined into a single object, such as:

var data = []
data[0] = {name:'ronaldo', team: 'europe/spain/realmadrid'}
data[1] = {name:'messi', team: 'europe/spain/barcelona'}
data[2] = {name:'gerald', team: 'europe/england/liverpool'}
data[3] = {name:'unknown english', team: 'europe/england'}

You could easily loop through them when processing.

It's important to consider why this needs to be stored as a JSON Tree. The structure is complex with different types of nodes - continents, countries, teams, and players. It might be more effective to convert it into a fielded structure first before generating the tree.

Edit: After further consideration, something like this might work better:

var data = [];
data[0] = {name:'ronaldo', team: 'europe/spain/realmadrid'};
data[1] = {name:'messi', team: 'europe/spain/barcelona'};
data[2] = {name:'gerald', team: 'europe/england/liverpool'};
data[3] = {name:'unknown english', team: 'europe/england'};

var tree = {};
function fillTree(name, steps) {
   let current = null;
   for (let y = 0; y < steps.length; y++) {
      if (y == 0) {
         if (!tree.children || typeof tree.children == 'undefined'){
            tree = { text: steps[y], leaf: false, children: [] };
         }
         current = tree.children;
      } else {
         current.push({ text: steps[y], leaf: false, children: [] })
         current = current[current.length - 1].children;
      }
   }
   current.push({ text: name, leaf: true })
}

for (let x = 0; x < data.length; x++) {
  steps = data[x].team.split('/');
  fillTree(data[x].name, steps)
}

This implementation creates a JavaScript object. Conversion to JSON can be done at your discretion.

Update:

A revised FillTree function that prevents duplicate entries:

var tree = {};
function fillTree(name, steps) {
   let current = null,
   existing = null,
   i = 0;
   for (let y = 0; y < steps.length; y++) {
      if (y == 0) {
         if (!tree.children || typeof tree.children == 'undefined'){
            tree = { text: steps[y], leaf: false, children: [] };
         }
         current = tree.children;
      } else {
         existing = null;
         for (i = 0; i < current.length; i++) {
            if (current[i].text === steps[y]) {
               existing = current[i];
               break;
            }
         }
         if (existing) {
            current = existing.children;
         } else {
            current.push({ text: steps[y], leaf: false, children: [] });
            current = current[current.length - 1].children;
         }
      }
   }
   current.push({ text: name, leaf: true })
}

To convert this object to JSON, you can use JSON.stringify(tree), although support may vary (JavaScript JSON Page).

Answer 3

Answer №2

When considering using children as object/hash instead of an array, I have come up with a solution inspired by Jordan's suggestion found at this link.

let child1 = {name:'ronaldo', team: 'europe/spain/realmadrid'}
let child2 = {name:'messi', team: 'europe/spain/barcelona'}
let child3 = {name:'gerald', team: 'europe/england/liverpool'}
let child4 = {name:'unknown english', team: 'europe/england'}

data = [child1, child2, child3, child4]
tree = {};
for(let i = 0; i < data.length; i++){
    let steps = data[i].team.split('/'); 

    steps.push(data[i].name)
    let current = tree;

    for(let j = 0; j < steps.length; j++){
        let step = steps[j]
        current.leaf = false;
        current.children = current.children || {};
        current = current.children
        current[step] = current[step] || {text: step, leaf: true} 
        current = current[step];
    }
}

Answer 4

When considering using children as object/hash instead of an array, I have come up with a solution inspired by Jordan's suggestion found at this link.

let child1 = {name:'ronaldo', team: 'europe/spain/realmadrid'}
let child2 = {name:'messi', team: 'europe/spain/barcelona'}
let child3 = {name:'gerald', team: 'europe/england/liverpool'}
let child4 = {name:'unknown english', team: 'europe/england'}

data = [child1, child2, child3, child4]
tree = {};
for(let i = 0; i < data.length; i++){
    let steps = data[i].team.split('/'); 

    steps.push(data[i].name)
    let current = tree;

    for(let j = 0; j < steps.length; j++){
        let step = steps[j]
        current.leaf = false;
        current.children = current.children || {};
        current = current.children
        current[step] = current[step] || {text: step, leaf: true} 
        current = current[step];
    }
}

Answer 5

Answer №3

Start by organizing your data into a flat array and then proceed to search for nested JSON structures.

For example:

[{"itemname": "item1", "settingkey": "key1", "settingvalue": "value1"}, {"itemname": "item2", "settingkey": "key2", "settingvalue": "value2"}];

Next, execute the following code snippet:


var keys = Object.keys(dataMap);

var json = [];
for (var key in keys) {
        var innerJson = {};
        innerJson["name"] = keys[key];
        var innerMap = dataMap[keys[key]];

        if (innerMap instanceof Array) {
            innerJson["size"] = innerMap[0];
        } else if (innerMap instanceof Object) {

            var child = processHierarchicalData(innerMap);
            innerJson["children"] = child;
        }
        json.push(innerJson);
}

Answer 6

Start by organizing your data into a flat array and then proceed to search for nested JSON structures.

For example:

[{"itemname": "item1", "settingkey": "key1", "settingvalue": "value1"}, {"itemname": "item2", "settingkey": "key2", "settingvalue": "value2"}];

Next, execute the following code snippet:


var keys = Object.keys(dataMap);

var json = [];
for (var key in keys) {
        var innerJson = {};
        innerJson["name"] = keys[key];
        var innerMap = dataMap[keys[key]];

        if (innerMap instanceof Array) {
            innerJson["size"] = innerMap[0];
        } else if (innerMap instanceof Object) {

            var child = processHierarchicalData(innerMap);
            innerJson["children"] = child;
        }
        json.push(innerJson);
}

Building a hierarchical JSON structure from a string hierarchy

Answer №1

Answer №2

Answer №3

Similar questions

methods for retrieving columns from a dictionary that lack keys

In the event that you encounter various version formats during your work

issue encountered during resource provider setup

I am having trouble with a basic AJAX script using iframes. The first call returns a null element, but all subsequent calls work perfectly. What am I missing?

How can Codeception/Selenium help in testing the tooltip or customValidity message?

Angularjs directive experiencing intermittent firing of IntersectionObserver

What could be causing the three.PointLightHelper to fail in my script?

How can I achieve a "tab selector" effect with "input" elements on a website?

The AngularJs directive designed specifically for numerical values is not functioning properly in Internet Explorer 11

Failure of Chrome to automatically mark checkboxes as checked upon page loading

CSS Element Overlapping Issue in Safari Browser

Only JSON objects with a boolean value of true will be returned

looking to display the latest status value in a separate component

Inconsistencies observed in the behavior of Rails JavaScript assets with respect to

Uniqid in React fails to generate unique IDs

Issue with Angular UI Router arises when state cannot be resolved upon page reload

Resolving Problem with Replacing Values in Pandas JSON to CSV Conversion

When the icon is clicked, the text goes over the ul and the mobile slide menu goes beneath it

Having trouble enabling push notifications on Android with ngCordova

Creating a line that connects Point A to Point B using HTML, CSS, and JavaScript