PDA

View Full Version : Structuring/Nesting of json data to populate a tree grid



Harshrossi
28 May 2013, 7:17 AM
I have been struggling to populate a tree grid with json data. I am reading the data from database and then loading it to the tree grid.
The json data that I get from database is in similar format as given below:



{ "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 },{ "bike": "Honda", "color": "Red", "cost": 675000 },{ "bike": "Honda", "color": "Blue", "cost": 690000 },{ "bike": "Suzuki", "color": "White", "cost": 800000" },{ "bike": "Harley", "color": "Yellow", "cost": 980000 },{ "bike": "Harley", "color": "Black", "cost": 880000 }]}

In my tree panel, the first column is a tree column. I have set the below properties for tree panel
displayField: 'bike', rootVisible: false, useArrows: true, I am able to load it to the tree grid but the thing is for each data is displayed in seperate node in the tree. I know this is because the json structure is not suitable for the tree.
I want to convert or nest the json data in a particular format as given below:



{"data": [{ "bike": "Yamaha", "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 }] },{ "bike": "Honda", "data": [{ "bike": "Honda", "color": "Red", "cost": 675000 }, { "bike": "Honda", "color": "Blue", "cost": 690000 }] },{ "bike": "Suzuki", "data": [{ "bike": "Suzuki", "color": "White", "cost": 800000" }] },{ "bike": "Harley", "data": [{ "bike": "Harley", "color": "Yellow", "cost": 980000 }] },{ "bike": "Harley", "data": [{ "bike": "Harley", "color": "Black", "cost": 880000 }] }]} So that I can get the below output..
http://i.stack.imgur.com/hQ2kS.jpg

slemmon
30 May 2013, 9:33 AM
Check out the data used in the tree grid example from sencha.com
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#tree-grid

It looks like this:


{
"text": ".",
"children": [{
"task": "Project: Shopping",
"duration": 13.25,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"expanded": true,
"children": [{
"task": "Housewares",
"duration": 1.25,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [{
"task": "Kitchen supplies",
"duration": 0.25,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Groceries",
"duration": .4,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Cleaning supplies",
"duration": .4,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Office supplies",
"duration": .2,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}
]
}, {
"task": "Remodeling",
"duration": 12,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"expanded": true,
"children": [{
"task": "Retile kitchen",
"duration": 6.5,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Paint bedroom",
"duration": 2.75,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [{
"task": "Ceiling",
"duration": 1.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Walls",
"duration": 1.5,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Decorate living room",
"duration": 2.75,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Fix lights",
"duration": .75,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Reattach screen door",
"duration": 2,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}
]
}
]
}, {
"task": "Project: Testing",
"duration": 2,
"user": "Core Team",
"iconCls": "task-folder",
"children": [{
"task": "Mac OSX",
"duration": 0.75,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [{
"task": "FireFox",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Safari",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Windows",
"duration": 3.75,
"user": "Darrell Meyer",
"iconCls": "task-folder",
"children": [{
"task": "FireFox",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Safari",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Internet Exploder",
"duration": 3,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Linux",
"duration": 0.5,
"user": "Aaron Conran",
"iconCls": "task-folder",
"children": [{
"task": "FireFox",
"duration": 0.25,
"user": "Aaron Conran",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Aaron Conran",
"iconCls": "task",
"leaf": true
}
]
}
]
}
]
}


Notice how each parent node has a children property that is an array of child nodes underneath it. A node that doesn't have child nodes under it should also have leaf: true. This is how you'll need to structure your data so that the tree panel will know what child nodes belong to what parent nodes.

Harshrossi
15 Oct 2013, 2:46 AM
Thanks Slemmon, I am structuring the data in my query itself so that it is in the format you mentioned above.