Як побудувати дерево коментарів з масиву?
Є обʼєкти які представляють собою коментарі. В кожного такого обʼєкта є властивість ID та властивість to_comment_id яка вказує який саме коментар коментує даний коментар. На основі цих даних потрібно з HTML–тегів UL та LI побудувати дерево коментраів. Наприклад:
<UL>
<LI>Коментар № 1.</LI>
<UL>
<LI>Коментар № 2. Відповідь на № 1.</LI>
<UL>
<LI>Коментар № 3. Відповідь на № 2.</LI>
</UL>
</UL>
</UL>
Як виглядає структура коментарів (числа — це номера коментарів):
1
2
3
4
5
6
13
7
8
9
10
11
14
12
15
Додумався лише до того щоб записувати вкладені коментарі в Dictionary в якому ключі — це ID коментарів, а значення це List відповідей на коментар.
Відповіді на питання (2)
Додумався лише до того щоб записувати вкладені коментарі в Dictionary в якому ключі — це ID коментарів, а значення це List відповідей на коментар.
Як на мене це і буде оптимальне рішення для даної задачі.
Спочатку обходимо список коментарів і розділяємо їх на 2 групи:
- Список кореневих коментарів (наприклад:
rootComments
) у яких немаєto_comment_id
і з яких почнеться дерево - Словник з відповідями (наприклад:
childComments
) на коментарі де ключto_comment_id
, а значення - це список коментарів зі вказанимto_comment_id
А далі рекурсивно рендеримо дерево коментарів починаючи з кореневих коментарів:
// Псевдокод
// Обхід кореневих коментарів
<ul>
@for(comment in rootComments)
// рендеринг віджету з коментарем
@endfor
</ul>
Html віджет коментаря:
<li>тут наш комнетар</li>
@if(childComments.has(comment.id))
<ul>
@for(comment in childComments[comment.id])
// рекурсивний рендеринг віджету з коментарем
@endfor
</ul>
@endif
To build a comment tree from an array, you can follow these steps:
- Create an empty object to store the comment tree.
- Loop through the array of comments.
- For each comment, check if there is a "to_comment_id" property. If not, it is a root comment, so add it directly to the comment tree object.
- If there is a "to_comment_id" property, find the corresponding parent comment in the comment tree object.
- Add the current comment as a child of the parent comment.
- Repeat steps 4-5 until all comments are processed.
Here is an example implementation in JavaScript:
// Example comment array
const comments = [
{ id: 1, to_comment_id: null },
{ id: 2, to_comment_id: 1 },
{ id: 3, to_comment_id: 2 },
{ id: 4, to_comment_id: 3 },
{ id: 5, to_comment_id: 4 },
{ id: 6, to_comment_id: 5 },
{ id: 7, to_comment_id: null },
{ id: 8, to_comment_id: 7 },
{ id: 9, to_comment_id: 8 },
{ id: 10, to_comment_id: 9 },
{ id: 11, to_comment_id: 10 },
];
// Function to build comment tree
function buildCommentTree(comments) {
const commentTree = {};
comments.forEach((comment) => {
const { id, to_comment_id } = comment;
if (to_comment_id === null) {
// This is a root comment
commentTree[id] = { comment, children: [] };
} else {
// Find the parent comment
const parentComment = findParentComment(commentTree, to_comment_id);
if (parentComment) {
parentComment.children.push({ comment, children: [] });
}
}
});
return commentTree;
}
// Function to find parent comment in the comment tree
function findParentComment(commentTree, to_comment_id) {
for (const key in commentTree) {
if (commentTree.hasOwnProperty(key)) {
const parentComment = commentTree[key];
if (parentComment.comment.id === to_comment_id) {
return parentComment;
}
const childComment = findParentComment(parentComment.children, to_comment_id);
if (childComment) {
return childComment;
}
}
}
return null;
}
// Example usage
const commentTree = buildCommentTree(comments);
console.log(commentTree);
This implementation will create a comment tree object where each comment is a child of its parent comment. You can then use this object to generate the HTML structure using the UL and LI tags as desired.