Построение иерархического дерева из объекта
Приветствую Вас, дорогие постояльцы данного форума. У меня возникла проблема с построением иерархического дерева на нативном JS. Вроде функция не должна быть сложной: запуск и пробежка по объекту с помощью рекурсии, но всё же в тупик эта функция меня завела. Итак, меньше болтавни, больше кода)
Вот исходный объект
var beginObj = {
0: {
parent: 1
},
1: {
parent: 4
},
2: {
parent: 3
},
3: {
parent: 4
},
4: {
parent: ""
},
5: {
parent: ""
},
6: {
parent: ""
},
7: {
parent: 8
},
8: {
parent: ""
},
9: {
parent: 10
},
10: {
parent: ""
}
};
А вот уже конечный объект который должен получится после пробежки по циклу
var endObj = {
4: {
1: {
0: ""
},
3: {
2: ""
}
},
5: "",
6: "",
8: {
7: ""
},
10: {
9: ""
}
};
Ну и мои наработки (если конечно в них есть смысл...)
for(var key in beginObj){
if(endObj[beginObj[key].parent]) endObj[beginObj[key].parent] = endObj[beginObj[key].parent];
else endObj[beginObj[key].parent] = {};
if(beginObj[key].parent) endObj[beginObj[key].parent][key] = "";
else {
if(!endObj[key]) endObj[key] = "";
else endObj[key] = endObj[key];
}
}
P.S. Я понимаю, что такому быдлокодеру, как я не место в этом бренном мире, но буду очень благодарен за помощь) Вот аналогия реализованная на php - http://phpdes.com/php/postroenie-der...php-rekursiya/ |
логика есть ?
|
Логика, была, но после 3 дней издевательств над кодом, она ушла в небытие. Ну, по сути необходимо слепить рекурсивную функцию, которая будет пробегаться по массиву, читать парент и заносить данные в другой массив (в моём случае я оптимальным решением выбрал объект). Просто не могу понять как сделать универсальную проверку, в которой будет проверятся, наличие следующего элемента в объекте (вниз по дереву). Аналогия тому что я хочу реализовать это бесконечное меню на php, вот ссылка - http://phpdes.com/php/postroenie-der...php-rekursiya/ . Пытался слепить по аналогии, но как-то не пошло( Помогите пожалуйста.
|
Цитата:
в прошлый раз решение было такое ... где-то на форуме лежит дубликат
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
li > ul {
display: none;
}
li.opened > ul {
display: block;
}
.selfSwitcher {
color: red;
cursor: pointer;
}
.selfSwitcher > ul {
color: #0000FF;
cursor: default;
}
</style>
<script>
window.onload=function(){
var beginObj = {
0: {
parent: 1
},
1: {
parent: 4
},
2: {
parent: 3
},
3: {
parent: 4
},
4: {
parent: ""
},
5: {
parent: ""
},
6: {
parent: ""
},
7: {
parent: 8
},
8: {
parent: ""
},
9: {
parent: 10
},
10: {
parent: ""
}
};
/* переделка обьекта в массив */
var data = Object.keys(beginObj).map(function (key,i) {
return {"id" : key,"cat_name":"Dashboard"+i,"parent": beginObj[key].parent }
});
var n = 0 ;
function rec(data) {
var f = document.createElement('ul');
for (var i=0; i<data.length; i++) {
var li = data[i];
var parentId = '_'+li.parent;
var liParent = f.querySelector('#'+parentId);
if (!liParent) {
liParent = document.createElement('li');
liParent.id = parentId;
f.appendChild(liParent);
} ;
var ul = liParent.querySelector('ul');
if(!ul) {
liParent.className = 'selfSwitcher';
ul = document.createElement('ul');
liParent.appendChild(ul)
};
var liId = '_'+li.id;
var liText = li.cat_name;
li = f.querySelector('#'+liId);
if(!li) {
li = document.createElement('li');
li.id = liId;
}
li.insertBefore(document.createTextNode(liText),li.firstChild );
ul.appendChild(li)
}
f.firstChild.insertBefore(document.createTextNode('menu'), f.firstChild.firstChild )
x.appendChild(f)
}
rec(data);
Array.prototype.forEach.call(document.querySelectorAll(".selfSwitcher"), function(c) {
c.addEventListener("click", function(a) {
a = a.target;
a == c && a.classList.toggle("opened")
})
});
}
</script>
</head>
<body>
<div id="x"></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 13:08. |