Обход объекта 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]
});
}
}
}
}