Как сделать древовидное представление с возможностью редактирования полей?

Question

[mamaanarhiya]

Допустим, есть массив:

let data = [
    { id: 1, parentId: null, name: 'root' },
    { id: 2, parentId: 1, name: 'ch1' },
    { id: 3, parentId: 2, name: 'ch2' },
    { id: 4, parentId: 2, name: 'ch2' },
    { id: 5, parentId: 2, name: 'ch2' },
    { id: 6, parentId: 1, name: 'ch1' },
    { id: 7, parentId: 6, name: 'ch2' },
    { id: 8, parentId: 6, name: 'ch2' },
    { id: 9, parentId: 6, name: 'ch2' },
    { id: 10, parentId: 9, name: 'ch3' }
];

Как из этого массива можно сделать древовидное представление, с возможностью редактирования
поля name, для каждого эллемента дерева? Интересует просто js, без каких-либо библиотек. Спасибо заранее.

Answer 1

[Kovalsky]

1. Из исходного объекта создать древовидную структуру,
2. Создать соответствующую HTML-структуру, для каждого элемента выбрать предпочтительный способ редактирования,
3. К каждому элементу дерева привязать соответствующий объект,
4. Корневому элементу получившегося дерева делегировать обработку соответствующих событий ввода.

Лютый спойлер

Answer 2

[Олег]

https://jsfiddle.net/9bb7pebq/2/