Обход объекта JSON для создания jsTree

Я хочу создать jsTree из JSON с разной глубиной (может быть 10 или более уровней). Поэтому я искал в Интернете и нашел метод для создания 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);

Но есть несколько проблем: как создать конкретный идентификатор для каждого элемента? (функция может запомнить идентификатор родительского атрибута)

Он говорит объект объект, если я правильно понимаю это, я должен получить доступ к узлу родительского объекта. Но как? this.parent.node не работает.

Отсутствуют элементы, их должно быть около 10.

Мой путь решения идет в правильном направлении?

Заранее спасибо.

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);

Единственное, что не предоставляет эта функция - это текст для элементов, которые являются самими parentNodes. Вместо этого он помещает в дочерние объекты, что, скорее всего, неправильно. Но вы не указали, какие текстовые родительские узлы должны содержать.

РЕДАКТИРОВАТЬ: я изменил функцию так, чтобы родительские узлы теперь содержали текст "родительский узел", а не их дочерний объект.

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]
                });
            }
        }
    }
}
Другие вопросы по тегам