Convert flat JSON file to hierarchical json data like flare.json [d3 example file]
26,038
Solution 1
Updated to use a recursive method
This should work for n levels rather than just 2 or 3. You just need to specify which properties define which levels.
var data = [
{ "dep": "First Top", "name": "First child", "model": "value1", "size": "320" },
{ "dep": "First Top", "name": "First child", "model": "value2", "size": "320" },
{ "dep": "First Top", "name": "SECOND CHILD", "model": "value1", "size": "320" },
{ "dep": "Second Top", "name": "First Child", "model": "value1", "size": "320" }
];
var newData = { name :"root", children : [] },
levels = ["dep","name"];
// For each data row, loop through the expected levels traversing the output tree
data.forEach(function(d){
// Keep this as a reference to the current level
var depthCursor = newData.children;
// Go down one level at a time
levels.forEach(function( property, depth ){
// Look to see if a branch has already been created
var index;
depthCursor.forEach(function(child,i){
if ( d[property] == child.name ) index = i;
});
// Add a branch if it isn't there
if ( isNaN(index) ) {
depthCursor.push({ name : d[property], children : []});
index = depthCursor.length - 1;
}
// Now reference the new child array as we go deeper into the tree
depthCursor = depthCursor[index].children;
// This is a leaf, so add the last element to the specified branch
if ( depth === levels.length - 1 ) depthCursor.push({ name : d.model, size : d.size });
});
});
Solution 2
var data = [
{ "state": "UP", "district": "Agra", "block": "IradatNagar","school":"APS","name":"A" },
{ "state": "UP", "district": "Agra", "block": "IradatNagar","school":"IPS","name":"B" },
{ "state": "UP", "district": "Agra", "block": "IradatNagar","school":"APS","name":"C" },
{ "state": "MP", "district": "Bhopal", "block": "chota_Bhopal","school":"DPS","name":"D" },
{ "state": "UP", "district": "Mathura", "block": "Farah","school":"HPS","name":"E" },
{ "state": "UP", "district": "Kanpur", "block": "Mania","school":"BPs","name":"F" },
{ "state": "UP", "district": "Agra", "block": "Arjun Nagar","school":"GPS","name":"G" },
{ "state": "MP", "district": "Gwalior", "block": "Surya Nagar","school":"DPS","name":"H" }
];
var newData = { name :"State", children : [] },
levels = ["state","district","block","school"];
data.forEach(function(d){
var depthCursor = newData.children;
levels.forEach(function( property, depth )
{
var index;
depthCursor.forEach(function(child,i)
{
if ( d[property] == child.name )
index = i;
});
if ( isNaN(index) )
{
depthCursor.push({name : d[property], children : []});
index = depthCursor.length - 1;
}
depthCursor = depthCursor[index].children;
if ( depth === levels.length - 1 )
{
depthCursor.push({ name : d.name});
}
});
});
console.log(newData);
Author by
Unknown User
Updated on July 09, 2022Comments
-
Unknown User almost 2 years
After a troublesome fight i almost figured how to convert a flat json file to a Hierarchical one. I didn't write the function by my own. I copied it from the below post.
But now the problem now is, the function which was written in the post has just 2 levels of hierarchy. But i'm looking for 4 levels hierarchy. I tried to override the function where i failed but.
Code with what i'm trying.
var data = [ { "dep": "First Top", "name": "First child", "model": "value1", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value2", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value3", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value4", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value1", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value2", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value3", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value4", "size": "320" }, { "dep": "Second Top", "name": "First Child", "model": "value1", "size": "320" }, { "dep": "Second Top", "name": "First Child", "model": "value2", "size": "320" }, { "dep": "Second Top", "name": "First Child", "model": "value3", "size": "320" }, { "dep": "Second Top", "name": "First Child", "model": "value4", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value1", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value2", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value3", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value4", "size": "320" }, { "dep": "Third Top", "name": "First Child", "model": "value2", "size": "320" }, { "dep": "Third Top", "name": "First Child", "model": "value3", "size": "320" }, { "dep": "Third Top", "name": "First Child", "model": "value4", "size": "320" }, { "dep": "Third Top", "name": "First Child", "model": "value5", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value1", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value2", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value3", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value4", "size": "320" } ] var newData = {"name":"root", "children":{}} data.forEach(function(d){ if(typeof newData.children[d.dep] !== 'undefined') { newData.children[d.dep].children.push(d) } else { newData.children[d.dep] = {"name": d.dep, "children": [{"name": d.name, "children": [{"name": d.model, "size": d.size}]}]} } }) newData.children = Object.keys(newData.children).map(function (key) { return newData.children[key]; }); // show what we've got d3.select('body').append('pre') .text(JSON.stringify(newData, null, ' '));Output of the current code
{ "name": "root", "children": [ { "name": "First Top", "children": [ { "name": "First child", "children": [ { "name": "value1", "size": "320" } ] }, { "dep": "First Top", "name": "First child", "model": "value2", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value3", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value4", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value1", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value2", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value3", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value4", "size": "320" } ] }, { "name": "Second Top", "children": [ { "name": "First Child", "children": [ { "name": "value1", "size": "320" } ] }, { "dep": "Second Top", "name": "First Child", "model": "value2", "size": "320" }, { "dep": "Second Top", "name": "First Child", "model": "value3", "size": "320" }, { "dep": "Second Top", "name": "First Child", "model": "value4", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value1", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value2", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value3", "size": "320" }, { "dep": "Second Top", "name": "SECOND CHILD", "model": "value4", "size": "320" } ] }, { "name": "Third Top", "children": [ { "name": "First Child", "children": [ { "name": "value2", "size": "320" } ] }, { "dep": "Third Top", "name": "First Child", "model": "value3", "size": "320" }, { "dep": "Third Top", "name": "First Child", "model": "value4", "size": "320" }, { "dep": "Third Top", "name": "First Child", "model": "value5", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value1", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value2", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value3", "size": "320" }, { "dep": "Third Top", "name": "Second Child", "model": "value4", "size": "320" } ] } ] }Desired Output Format:
{ "name": "root", "children": [ { "name": "First Top", "children": [ { "name": "First child", "children": [ { "name": "value1", "size": "320" }, { "name": "value2", "size": "320" }, { "name": "value3", "size": "320" }, { "name": "value4", "size": "320" } ] }, { "name": "Second child", "children": [ { "name": "value1", "size": "320" }, { "name": "value2", "size": "320" }, { "name": "value3", "size": "320" }, { "name": "value4", "size": "320" } ] }, ] }, { "name": "Second Top", "children": [ { "name": "First child", "children": [ { "name": "value1", "size": "320" }, { "name": "value2", "size": "320" }, { "name": "value3", "size": "320" }, { "name": "value4", "size": "320" } ] }, { "name": "Second child", "children": [ { "name": "value1", "size": "320" }, { "name": "value2", "size": "320" }, { "name": "value3", "size": "320" }, { "name": "value4", "size": "320" } ] }, ] }, { "name": "Third Top", "children": [ { "name": "First child", "children": [ { "name": "value1", "size": "320" }, { "name": "value2", "size": "320" }, { "name": "value3", "size": "320" }, { "name": "value4", "size": "320" } ] }, { "name": "Second child", "children": [ { "name": "value1", "size": "320" }, { "name": "value2", "size": "320" }, { "name": "value3", "size": "320" }, { "name": "value4", "size": "320" } ] }, ] } ] }I'm cracking my head from a week but i alone couldn't figure it out. Someone please amend the function to get the data in the hierarchical format as i've updated.
Thanks in advance!!
-
Unknown User over 10 yearsHi - Richard. Thanks for the reply. But I couldn't get the name column in the json format. I'm getting the dep column values followed by model value. Between these two i need to add name i.e, dep > name > value. How do i do it. I'm not that good in editing the function. I tried changing this line - newData.children[d.dep].children[childIndex] = { name : d.name, children[{ name : d.model, size : d.size }]}; but couldn't get it. Thanks in advance again.
-
Unknown User over 10 yearsThanks a lot Richard. After a many days of struggle i was able to do it with your help. Thanks a lot again!!
-
Unknown User almost 10 yearsHi Richard - Please help me with this post.