Menu
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.
D3 JSON DATA CONVERSION
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!!
349
JSON is an ideal format for larger data that have a hierarchical structured relationship. The structure of a JSON object is as follows: The data are in name/value pairs. Data objects are separated by commas.
Rules for JSON SyntaxData should be in name/value pairs. Data should be separated by commas. Curly braces should hold objects. Square brackets hold arrays.
By default, the JSON command writes "flat" JSON: JSON without nested structures. All fields are first-level properties, so you can refer to them simply by name. You don't need to qualify field names with any antecedent names.
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. Extension is . json , and MIME type is application/json . It's broadly used in data transaction between application and servers. JS only has one data type which is Object.
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);
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 });
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
