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

Question

[Ulyana]

С чего начать создание древовидных комментариев с бесконечной вложенностью? какая логика?
Может кто знает какие-нибудь фичи...

Answer 1

[Kovalsky]

В общем, так конечно не круто делать, но вот варианты: 1, 2 и 3.

Последний это переделанный пример обработки списков с сайта VueJS.

И опять же - всю инфу я брал из мануалов или из примеров. Я конечно не ваш преподаватель, но я вам, Ульяна, настоятельно советую потратить несколько часов хотя бы на самый простой мануал по Vue.

Comments

[Ulyana]

Никита Полевой
спасибо большое за несколько решений :)
всегда стараюсь изучать документацию, когда позволяет время!

Зачем вы искали как меня зовут? :))))

[Kovalsky]

horosami: ну, не так буквально - я не искал как вас зовут, я просто глянул в интернетах, какие вопросы вы задаёте, и оказалось что всё они были по таким базовым моментам. Строго говоря, мой ответ это скорее медвежья услуга, потому что у вас была прекрасная возможность познакомиться и со списками VueJS и с рекурсией.

А имя просто случайно нашлось, в интернетах нет анона.

Answer 2

[Дмитрий Лузанов]

бесконечной вложенностью? какая логика?

Рекурсия.

const comments = [
	{
		comment: 'Comment',
    childs: [
    	{
      	comment: 'Child comment',
        childs: [
        	
        ]
      }
    ]
	}
]

С чего начать создание древовидных комментариев

С более конкретной постановки задачи.

Тык

Comments

[Ulyana]

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));

[Kovalsky]

horosami: а в чем собственно вам нужна помощь, если у вас даже есть рабочий код?

Если проблема с выводом, то просто создаёте функцию, которая создаёт список, передаёте ей ваш массив. После создания элемента списка, например, можно проверять есть ли у элемента дети, и если есть, то в этом же элементе создавать еще один список, то есть вызывать эту функцию еще раз. Тучи примеров рекурсии можно найти в гугле.

[Ulyana]

Никита Полевой:
мне надо оформить вывод комментариев на странице))
нашла ссылку в документации vue.js для построения иерархического дерева.
это как раз то, что мне надо.
ru.vuejs.org/v2/examples/tree-view.html
но!!!!!!! это дерево принимает данные немного не в таком формате как у меня возвращает функция buildHierarchy.
Дерево vue.js принимает такой формат:

var data = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]
}

а у меня функция buildHierarchy возвращает такой формат:

children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]

то есть мне не хватает дополнительного поля name
функция buildHierarchy возвращает массив, а дерево vue.js принимает тип object
в это и нужна помощь(

[Stalker_RED]

horosami: А в чем проблема добавить еще одно поле name?

[Ulyana]

Stalker_RED: даже когда меняешь Name на name, то всё равно не работает

[Stalker_RED]

horosami:

а у меня функция buildHierarchy возвращает такой формат:

children: [
    { name: 'hello' },
    { name: 'wat' },
...

На самом желе какой-то другой?

Answer 3

[Exploding]

И опять на помощь приходит html+css!
Без js можно даже! Вот так:

<details>
    <summary>Коменты внутри</summary>
    <p>
         <details>
                <summary>Первый</summary>
                <p>Текст комментария 1</p>
          </details>
          <details>
                 <summary>Второй</summary>
                  <p>Текст комментария 2</p>
          </details>
          <details>
                 <summary>И внутри...</summary>
                  <p>
                    <details>
                              <summary>Третий</summary>
                              <p>Текст комментария 3</p>
                  </details>
     </p>
          </details>
    </p>
</details>

Ну а в css стилизовать уже хоть под черта лысого можно...

Comments

[Ulyana]

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));

[Exploding]

horosami: Что за....
С помощью CSS оформляется html, а не js) Как вы пытаетесь оформить это я не могу понять.
И собственно что это за файлик? У вас что сообщения в файлике хранятся что-ли?
В бд их надо... домой они хотят, плачут:)

[Ulyana]

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

агааа) в файлике 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..... вы поняли)
но я не знаю, как видоизменить эту функцию, чтоб она создавала соответствующую разметку.)
вот в чем беда.
может у вас есть идея?)

[Exploding]

horosami: Есть конечно, только не могу понять как Ваша задача может повторять идентичный пост на stackoverflow.com/questions/12831746/javascript-building-a-hierarchical-tree/12832012

[Exploding]

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

[Ulyana]

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

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

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

[Exploding]

horosami: Вы программист? Кто вас заставляет это делать?)) Принудительный труд запрещен международной конвенцией по правам человека!
И зачем вам прокладка имежду субд и выводом в виде json сервера? Почему не выводить это в одном php скрипте?

[Ulyana]

Exploding:
я с вами полностью согласна, что при помощи пхп и обычной базы данных это намного проще!!!!!!!!!!!!!!!!!
я даже сама знаю как это сделать :D

....но, это мое задание по практике. выкручиваюсь как могу
так что..помогите пожалуйста, если есть идеи :))

[Exploding]

horosami: да помогу, но я не думаю, что в вашем задании стоит формулировка: зайти на стекОверфлоу, скопировать кусок поста и сделать, чтобы оно работало!)))

[Exploding]

Вы можете дать четкие инструкции какие указаны в вашем задании?)

[Ulyana]

Exploding:
хахахахах)))))
жду вашей помощи! очень жду :D

[Exploding]

horosami: как я могу вам помочь, если у меня нет четких инструкций! Изначально вы спросили об общем принципе построения, я дал вам отличный на мой взгляд совет. Вы же взяли кусок кода из другого поста и вообще выдаете это как задание по практике!))

[Ulyana]

Exploding:
мне необходимо чтоб выводились комментарии иерархически.
типа такого


я нашла тот код на стекОверфлоу. подумала что он оч мне поможет. но чот нефига)
он выводит иерархию в console, но мне надо на HTML. вот
конкретно прошу вас, продемонстрируйте мастер-класс по созданию динамической разметки html с помощью данной функции :З

отписала от души)

[Exploding]

horosami: с телефона сейчас немного не удобно демонстрировать. Если подождете чуть. И я просил исходные данные вашего задания, а вы мне тоже самое расписали только более длинным текстом))

[Ulyana]

Exploding: так вы поняли, что я до вас хотела донести?)))

[Exploding]

horosami: да я то понял давно, просто очень хотелось увидеть само задание, которое вы упорно не хотите выложить))

[Ulyana]

Exploding: там огромное задание. в общем: создать блог.
я сейчас сама попробую. нашла про деревья в документации vue.js.
но и ваш вариант я тоже очень жду!

[Exploding]

horosami: самый ленивый и ресурсоэкономный вариант всем нравится как правило))) ок. Доберусь до компа скину.

[Exploding]

horosami: так а что, в задании стоит условие, что это нельзя делать с использованием php?

[Ulyana]

Exploding: сказали, что делать на пхп нельзя. просто такая задача((

[Exploding]

horosami: ну на jq то надеюсь можно?

[Kovalsky]

horosami: вы не обижайтесь, но раз это задача, то почему бы не уделить 15 минут статейке с примерами рекурсии? Там ничего сложного, серьезно. К тому же я вам выше описал алгоритм. Просто реализуйте алгоритм, а если что-то будет не работать, отписывайтесь в комментарии.

[Exploding]

Никита Полевой: кстати да! Как же гранит не грызанным останется!))

[Ulyana]

Никита Полевой: алгоритм со стекОверфлоу рабочий. зачем мне придумывать велосипед.
мне просто надо вывести в html.
и так как я использую vue.js то пробую вывести через дерево(

[Ulyana]

Exploding: да конечно. мне любой вариант подойдет, кроме пхп)

[Exploding]

horosami: а если php+jq без vue.js? Структуру таблицы можно скинуть?

[Ulyana]

Exploding: знаете, с пхп точно не вариант. ментор сказал, чтоб добивала коменты на vue.js или на jQ,поэтому я и отправилась в приключение на стакОверфлоу (((((((((((((

[Kovalsky]

horosami:

var data = {
  name: 'My Tree',
  children: buildHierarchy(items)
}

Вот и всё решение на VueJS.

А раз вас experience не интересует, то вот вам и кастомное решение, в том числе на jQ, хоть я и не оч понимаю зачем.

[Ulyana]

Никита Полевой:
до данного способа тоже додумалась. пробовала, но он не работает и уже отчаялась.

var data = {
  name: 'My Tree',
  children: buildHierarchy(items)
}

офигеть) ваше кастомное решение отлично работает) и создает прекрасную вложенность!!!!!!!!!!!!!!!!
а может поможете понять, почему не получается сделать на vue.js даже если приводить к такому типу как вы написали...? я пробовала и у меня не получилось((((((((((((((((((((((((((

[Kovalsky]

horosami: честно, не смогу помочь. Можете обратиться к примерам, там можете увидеть как строится дерево.

[Ulyana]

Никита Полевой: ну ладно) я вам очень благодарна! дай Бог вам здоровья)

[Kovalsky]

horosami: кстати если вы пытались просто подставить ваш массив в data.children, то всё это не работало потому что шаблон не соответствовал вашей структуре. Поправьте шаблон в соответствии с вашей структурой, все отрендерится. Вот прямо здесь можно редактировать.

[Exploding]

О, я смотрю вы уже отлично решили проблему, ну и хорошо)

[Ulyana]

Никита Полевой: я пробовала, но попробую еще раз. большое спасибо за помощь)

[Ulyana]

Exploding: ну как решили. на JQ варивант есть))) но у меня проект на vue) поэтому ментор задаст вопрос: ты что дура..?))
так что буду добивать вариант на vue, но если не выйдет, то воспользуюсь кастомным вариантом Никиты.

[Exploding]

horosami: ну уж с vue я точно ничем не помогу, т.к. в глаза его не видел даже:) Поэтому я и просил исходные данные задачи, чтобы понять что дано, что требуется получить и какими инструментами можно пользоваться

[Ulyana]

Exploding: я поняла вас)
все равно спасибо за помощь))
без таких умных как вы, никак :)

[Exploding]

horosami: Что-то ваш "ментор" странно себя ведет))
"коменты на vue.js или на jQ"... а из базы их чем выгребать то? Святыми молитвами? Что vue, что jq все равно через php получают данные из таблицы!

[Ulyana]

Exploding:
я вывожу данные тоже через vue.js)))
моя "база данных" это всего лишь db.json файл))) даже таблицы не связаны.
извращение так сказать.
ментор сказал, что данный шаблонизатор будет прост в использовании и в изучении))
вот и кручусь как юла)))

[Exploding]

horosami: но в db.json они то попадают посредством php всеравно!))

[Kovalsky]

Exploding: вам же дали ссылку, "выгребание" из базы это совсем не проблема, PHP там ни при чём.

[Exploding]

Никита Полевой: Дали, но я ее не смотрел!) У вас какое-то предвзятое ко мне отношение) Я чем-то не угодил или рассердил вас? Уверяю, я не специально)

[Kovalsky]

horosami: не прост, а наиболее прост из всех существующих. Смотрите ответ.

[Ulyana]

Exploding:
там не нужен пхп. поэтому и не использую в своем проекте пхп))
но согласна, что при помощи пхп можно сделать почти все и париться)

Answer 4

[Дмитрий Евграфович]

Есть такие фичи, называются vuejs, react, angular, jquery да и просто шаблонизаторы js - выбирайте любую и делайте вывод получившегося у вас дерева. У вас ведь проблема с выводом комментариев на странице я так понимаю, а не с построением дерева?

Comments

[Ulyana]

да, у меня проблема с выводом комментариев!!!!

в своем проекте я использую vue.js,но знакома с ним не на столько близко, поэтому есть проблемы, у самой не получается оформить вывод коментов на странцие

[Дмитрий Евграфович]

horosami: вам необходимо компоненты освоить. Делаете компонент comment, в его шаблоне вызываете его же для каждого элемента массива children. Массив этот у вас функцией buildHierarchy создается. и все нормально будет

[Ulyana]

Дмитрий Евграфович: как думаете... на основе этого получится?? ru.vuejs.org/v2/examples/tree-view.html
только что нашла в документации))

[Дмитрий Евграфович]

horosami: получится, если прочтете о компонентах и вникнете. код сам по себе простой в реализации, но если вы его сути не поймете, то пример смысла не будет иметь.