遍历JSON个对象创建jsTree

Question

我想从 JSON 创建一个具有不同深度（可以是 10 层或更多层）的 jsTree。所以我在网上搜索了一下，找到了一个创建jsTree的方法：traversing.

示例JSON：

{
    "testslave_1": {
        "DevKey": "94ssfsafafeaw382",
        "mapping": {
            "device1": "D1",
            "device2": "D2",
            "device3": "D3"
        }
    }
}

幸运的是我有 traverse-js 但我有问题。

这是jsTree要求的语法：

$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

到目前为止我已经试过了：

var obj = '{    "testslave_1": {        "DevKey": "94ssfsafafeaw382",       "mapping": {            "device1": "D1",            "device2": "D2",            "device3": "D3"     }   }}';

    var obj = JSON.parse(obj);
    var arr = [];

    traverse(obj).map(function (x) {
        
    var jsonTemp = '{ "id" : "'+this.path+'", "parent" : "'+this.parent+'", "text" : "'+this.node+'" }';
    jsonTemp = JSON.parse(jsonTemp);
    arr.push(jsonTemp);
        
    });

    console.dir(arr);

但是有几个问题：如何为每个项目创建一个特定的ID？（该函数可能会记住父属性的 ID）

说的是object object，如果我理解正确的话，我必须访问父对象的节点。但是怎么办？ this.parent.node 无效。

少了件，应该是10件左右。

我的解决方案方向是否正确？

提前致谢。

Answer 1

我不知道 traverse-js。如果你想得到像例子中那样的某种树结构，你可以用递归函数来实现，例如像这样：

var testobj = {
    testslave_1:{
        DevKey: "94ssfsafafeaw382",
        mapping: {
            device1:"D1",
            device2:"D2",
            device3:"D3"
        }
    }
};
var tree = {
    core: {
        data: []
    }
};
function createTreeData(object, parent){
    if(!parent){
        parent = "#"
    }
    for(var prop in object){
        if(object.hasOwnProperty(prop)){
            var obj = {
                id: prop,
                parent: parent
            };
            if(typeof object[prop] === "object"){
                createTreeData(object[prop], prop);
                obj.text = "parent node";
            }else{
                obj.text = object[prop];
            }
            tree.core.data.push(obj);
        }
    }
}
createTreeData(testobj);
console.log(tree);

此函数唯一不提供的是作为父节点本身的元素的文本。相反，它放入了很可能是错误的子对象。但是你没有指定父节点应该包含什么文本。

编辑： 我更改了函数，以便父节点现在包含文本 "parent node" 而不是它们的子对象。

EDIT2: 为纯文本属性创建节点的新函数：

function createTreeData(object, parent){
    if(!parent){
        parent = "#"
    }
    for(var prop in object){
        if(object.hasOwnProperty(prop)){
            tree.core.data.push({
                id: prop,
                parent: parent,
                text: prop
            });
            if(typeof object[prop] === "object"){
                createTreeData(object[prop], prop);
            }else{
                tree.core.data.push({
                    id: object[prop],
                    parent: prop,
                    text: object[prop]
                });
            }
        }
    }
}

遍历JSON个对象创建jsTree

Traverse JSON object to create jsTree

javascript

json

traversal

tree-traversal

jstree