Convert flat JSON file to hierarchical json data like flare.json [d3 example file]
Question
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!!
2 answers
solution1
17 ACCPTED 2013-10-11 12:10:17
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 });
});
});
solution2
1 2017-11-09 09:23:13
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Converting a regular json file to a parent-child hierarchical json as used by d3 flare.json
Generate (multilevel) flare.json data format from flat json
Convert regular json to flare.json for d3.js?
D3 collapsible trees without flare.json
Access more data from flare.json for d3.tree
Hierarchical JSON into flare.json format for use in Bilevel Partition
Construct nested unordered list in HTML using flare.json file?
Get path leading to clicked element in D3 visual (flare.json)
d3: tree layout from flare.json - how to include only some of nodes?
How to convert flat multi-branch data to hierarchical JSON?
Related Tags