How to Generate a Custom JSON from TreePanel - extjs

Question

I am trying to generate the JSON from an editable treepanel. I am able to generate the JSON , but would like the JSON to have only certain fields .
Here's how I generate the JSON by traversal.
function getNodeList(bfsQueue) {
var node = bfsQueue.pop();
var nodeQueue = [];
for (var ii = 0; ii < node.childNodes.length; ii++) {
bfsQueue.push( node.childNodes[ii] );
nodeQueue.push( node.childNodes[ii] );
}
if (bfsQueue.length === 0) {
return nodeQueue;
} else {
return nodeQueue.concat( getNodeList(bfsQueue) );
}
}
And this is where I call the function in my submit handler.
var startQueue = [];
var nodeList = [];
startQueue.push( tree.getRootNode() );
nodeList.push( tree.getRootNode() );
nodeList = nodeList.concat(getNodeList( startQueue ));
console.dir(nodeList);
for ( var nn = nodeList.length-1; nn >= 0; nn-- ) {
var params = [];
for (var pp in nodeList[nn].data) {
if (pp === "children" || pp === "loader") {continue;}
params.push('"' + pp + '":' + JSON.stringify(nodeList[nn].data[pp]) + '');
}
if ( nodeList[nn].childNodes.length > 0) {
var childList = [];
for (var ii = 0; ii < nodeList[nn].childNodes.length; ii++) {
childList.push( nodeList[nn].childNodes[ii].json );
}
params.push('"children": [' + childList.join(',') + ']');
}
nodeList[nn].json = "{" + params.join(",") + "}";
}
alert("My Root :"+nodeList[0].json);
The JSON generated is this.
{
"text": "Src",
"id": "src",
"expandable": true,
"expanded": true,
"allowDrag": false,
"parentId": null,
"root": true,
"leaf": "",
"depth": 0,
"index": 0,
"checked": null,
"cls": null,
"iconCls": null,
"isLast": true,
"isFirst": true,
"allowDrop": true,
"loaded": true,
"loading": false,
"href": null,
"hrefTarget": null,
"qtip": null,
"qtitle": null,
"children": [
{
"text": "United Kingdom",
"id": "United Kingdom",
"parentId": "src",
"root": "",
"leaf": "",
"depth": 1,
"index": 0,
"expanded": false,
"expandable": true,
"checked": null,
"cls": "",
"iconCls": "",
"isLast": true,
"isFirst": true,
"allowDrop": true,
"allowDrag": true,
"loaded": true,
"loading": false,
"href": "",
"hrefTarget": "",
"qtip": "",
"qtitle": "",
"children": [
{
"text": "London",
"id": "London",
"parentId": "United Kingdom",
"root": "",
"leaf": "",
"depth": 2,
"index": 0,
"expanded": false,
"expandable": true,
"checked": null,
"cls": "",
"iconCls": "",
"isLast": true,
"isFirst": true,
"allowDrop": true,
"allowDrag": true,
"loaded": false,
"loading": false,
"href": "",
"hrefTarget": "",
"qtip": "",
"qtitle": ""
}
]
}
]
}
And I need it to be in this format. Just a few fields not all .
{
"text": "Src",
"id": "src",
"parentId": null,
"root": true,
"leaf": "",
"depth": 0,
"children": [
{
"text": "United Kingdom",
"id": "United Kingdom",
"parentId": "src",
"root": "",
"leaf": "",
"depth": 1,
"children": [
{
"text": "London",
"id": "London",
"parentId": "United Kingdom",
"root": "",
"leaf": "",
"depth": 2
}
]
}
]
}
Please help. Thanks in advance.

Answer 1

Simply select the fields you want in the result.
Example:
function getNodeData(node, fields) {
var data = {};
// loop through desired fields
Ext.each(fields, function(fieldName) {
data[fieldName] = node.get(fieldName);
});
if (node.hasChildNodes()) {
var children = data.children = [];
node.eachChild(function(child) {
children.push(getNodeData(child, fields));
});
}
return data;
}
Usage:
var fields = ['text', 'id', 'parentId', 'root', 'leaf', 'depth'],
nodeList = getNodeData(tree.getRootNode(), fields);