Как сделать древовидные комментарии с бесконечной вложенностью на JavaScript?

Exploding:
так я нашла этот код там. проверила))) работает. подставила свои комментарии и в консоль все выводит.
но теперь надо в html это впихнуть. а вот как создавать ul li в такой ситуации я не знаю.

И что еще за json сервер такой??

https://github.com/typicode/json-server
самый простой сервер)

Как сделать древовидные комментарии с бесконечной вложенностью на JavaScript?

У вас что сообщения в файлике хранятся что-ли?

агааа) в файлике db.json)))))))))))))

короче, у меня стоит json-server
у меня есть бд в которой есть посты
у постов есть комментарии
комментарии могут быть вложенными (иерархическими, то есть я храню id предыдущего комментария)
я делаю запрос к базе данных и получаю ответ в следующем виде:

var items = [ 
{ 
"Id": "1", 
"Name": "q", 
"Parent": "2" 
}, 
{ 
"Id": "2", 
"Name": "w", 
"Parent": "" 
}, 
{ 
"Id": "3", 
"Name": "e", 
"Parent": "5" 
}, 
{ 
"Id": "4", 
"Name": "r", 
"Parent": "2" 
}, 
{ 
"Id": "5", 
"Name": "t", 
"Parent": "" 
}, 
{ 
"Id": "6", 
"Name": "y", 
"Parent": "2" 
}, 
{ 
"Id": "7", 
"Name": "u", 
"Parent": "6" 
}, 
{ 
"Id": "8", 
"Name": "i", 
"Parent": "6" 
} 
];

...типа такого

у меня есть код, который в консоль выводит иерархически эти комментарии.
но мне нужно выводить их на страницу в html и естественно оформить адекватно...в виде многоуровневого списка. например ul li ul li..... вы поняли)
но я не знаю, как видоизменить эту функцию, чтоб она создавала соответствующую разметку.)
вот в чем беда.
может у вас есть идея?)

Как сделать древовидные комментарии с бесконечной вложенностью на JavaScript?

Exploding
Ваша простота в решении меня изумляет))))))
но у меня есть такой js файл. теперь пытаюсь его оформить его с помощью css.
может подскажите

var items = [ 
{ 
"Id": "1", 
"Name": "q", 
"Parent": "2" 
}, 
{ 
"Id": "2", 
"Name": "w", 
"Parent": "" 
}, 
{ 
"Id": "3", 
"Name": "e", 
"Parent": "5" 
}, 
{ 
"Id": "4", 
"Name": "r", 
"Parent": "2" 
}, 
{ 
"Id": "5", 
"Name": "t", 
"Parent": "" 
}, 
{ 
"Id": "6", 
"Name": "y", 
"Parent": "2" 
}, 
{ 
"Id": "7", 
"Name": "u", 
"Parent": "6" 
}, 
{ 
"Id": "8", 
"Name": "i", 
"Parent": "6" 
} 
]; 


function buildHierarchy(arry) { 
var roots = [], children = {}; 

// find the top level nodes and hash the children based on parent 
for (var i = 0, len = arry.length; i < len; ++i) { 
var item = arry[i], 
p = item.Parent, 
target = !p ? roots : (children[p] || (children[p] = [])); 

target.push({ 
value: item 
}); 
} 

// function to recursively build the tree 
var findChildren = function (parent) { 
if (children[parent.value.Id]) { 
parent.children = children[parent.value.Id]; 
for (var i = 0, len = parent.children.length; i < len; ++i) { 
findChildren(parent.children[i]); 
} 
} 
}; 

// enumerate through to handle the case where there are multiple roots 
for (var i = 0, len = roots.length; i < len; ++i) { 
findChildren(roots[i]); 
} 

return roots; 
} 

console.log(buildHierarchy(items));

Как сделать древовидные комментарии с бесконечной вложенностью на JavaScript?

Predve4niy
только сейчас заметила, что вы мне скинули ссылку на ту же статью что и я нашла.
но я нашла ее раньше вас))
вот вам конкретная задача :)
у меня есть такой js файл. теперь пытаюсь его оформить его с помощью css.

var items = [ 
{ 
"Id": "1", 
"Name": "q", 
"Parent": "2" 
}, 
{ 
"Id": "2", 
"Name": "w", 
"Parent": "" 
}, 
{ 
"Id": "3", 
"Name": "e", 
"Parent": "5" 
}, 
{ 
"Id": "4", 
"Name": "r", 
"Parent": "2" 
}, 
{ 
"Id": "5", 
"Name": "t", 
"Parent": "" 
}, 
{ 
"Id": "6", 
"Name": "y", 
"Parent": "2" 
}, 
{ 
"Id": "7", 
"Name": "u", 
"Parent": "6" 
}, 
{ 
"Id": "8", 
"Name": "i", 
"Parent": "6" 
} 
]; 


function buildHierarchy(arry) { 
var roots = [], children = {}; 

// find the top level nodes and hash the children based on parent 
for (var i = 0, len = arry.length; i < len; ++i) { 
var item = arry[i], 
p = item.Parent, 
target = !p ? roots : (children[p] || (children[p] = [])); 

target.push({ 
value: item 
}); 
} 

// function to recursively build the tree 
var findChildren = function (parent) { 
if (children[parent.value.Id]) { 
parent.children = children[parent.value.Id]; 
for (var i = 0, len = parent.children.length; i < len; ++i) { 
findChildren(parent.children[i]); 
} 
} 
}; 

// enumerate through to handle the case where there are multiple roots 
for (var i = 0, len = roots.length; i < len; ++i) { 
findChildren(roots[i]); 
} 

return roots; 
} 

console.log(buildHierarchy(items));

Вывод данных json через post?

я не могу получить заголовок по которому кликаю, вот в чем проблема!!

Вывод данных json через post?

можете дать рабочую ссылку))
а вообще предполагалось обновление страницы!

Как красиво вывести json в html?

Алексей Ярков: а может у вас есть ссылки как пользоваться vue.js?) я посмотрела, что это более удобный вариант

Как красиво вывести json в html?

спасибо!)

Как красиво вывести json в html?

Алексей Ярков: спасибо :)

Как красиво вывести json в html?

Алексей Ярков: просто не могу красиво динамически вывести. чтоб потом не было проблем с версткой)

Как красиво вывести json в html?

Алексей Ярков: нет) мне надо вывести через jQ))