Как использовать следующие свойства данных для рендеринга древовидного изображения с помощью вложенных неупорядоченных списков (<ul>
)?Как сделать рекурсивную функцию для дерева?
// parentId value is always 0 for root nodes, otherwise this value corresponds to the id of its parent
// sequence represents the order of the element in the branch
// level represents the tree level of the element, root nodes will have a level of 1
var data = [
{ id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
{ id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
{ id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
{ id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
{ id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 },
{ id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 }
];
Результат должен выглядеть следующим образом:
A
Alan
Abe
B
Bir
Boromir
Я попытался с петлями для но вскоре я повторял код, чтобы получить дочерние узлы, и я не смог реорганизовать его в рекурсивная функция.
Вот CodePen с данными: http://codepen.io/nunoarruda/pen/KgVPmv
Вы еще искали «Javascript дерева отображения» на SO? Существуют некоторые существующие решения. Вы не отправили свою попытку кодирования (MCVE), которая может повлиять на скорость вашего ответа. – Prune
@nunoarruda ... рекурсивный подход не требуется. Взгляните на мой ответ ниже. –