To display name of the keys of json data in tree format using fancytree?

Question

I am using Fancytree jquery plugin with json data to display data in tree format. The question is, I want to display the key names instead of values as my tree nodes. For example,

[{
    "title": "Sample json",
    "expanded": true,
    "folder": true,
    "children": [{
        "title": "dev",
        "folder": true
    }, {
        "title": "etc",
        "folder": true,
        "children": [{
            "title": "cups"
        }, {
            "title": "httpd"
        }, {
            "title": "init.d"
        }]
    }

Here, I want to display, "title" as my tree node instead of "Sample json" value. How do I do that?

Any help would be appreciated. Thanks in advance!

Do you really want to display a tree with 6 nodes, all of them having "title" as title? — mar10, Mar 04 '15 at 20:40
@mar10, Yes. As in, I want to display the key names as nodes of fancytree instead of the values. — Ravz, Mar 05 '15 at 05:00
I don't get the point, but since the key is always 'title', you could simply pass {"title": "title", ...} for every node — mar10, Mar 05 '15 at 17:09
@mar10, actually I want to convert the XML into a JSON and then display the keys instead of the values in a tree format . The value should be displayed only if the node is expanded or else not displayed at all is also fine. — Ravz, Mar 09 '15 at 04:08
@mar10, is it necessary that the JSON generated should be in a particular format with particular keys as above? — Ravz, Mar 09 '15 at 04:08

score 0 · Answer 1 · answered Mar 07 '15 at 09:46

If the intial format of the json object can not be changed, you have one of the following options:

// option 1
$('#tree1').fancytree({
source: [{
    "title": "Sample json",
    "expanded": true,
    "folder": true,
    "children": [{
        "title": "dev",
        "folder": true
    }, {
        "title": "etc",
        "folder": true,
        "children": [{
            "title": "cups"
        }, {
            "title": "httpd"
        }, {
            "title": "init.d"
        }]
    }]
}],
renderNode: function (event, data) {
    var node = data.node;
    node.tooltip = node.title;
    node.setTitle('title');
}
});

// option 2
$('#tree2').fancytree({
source: {
    url: 'data.json'
},
postProcess: function (event, data) {
    var response = data.response;

    function changeTitle(nodeData) {
        nodeData.tooltip = nodeData.title;
        nodeData.title = 'title';
        for (var i in nodeData.children) {
            var subNodeData = nodeData.children[i];
            changeTitle(subNodeData);
        }
    }

    for (var i in response) {
        var nodeData = response[i];
        changeTitle(nodeData);
    }
}
});

To display name of the keys of json data in tree format using fancytree?

1 Answers1