javascript - 如何在 JavaScript 中显示评论线程层次结构？

Question

我有一组 JSON 格式的注释。 该 JSON 被加载到浏览器中。 我希望将评论显示为线程评论层次结构，最新的评论位于最前面。 我做了很多搜索来找到正确的算法。当然，这是一个已解决的问题，但我找不到它。

解释 JSON 字段:

• createdtime = epochseconds(评论创建时间)
• documentid = 该评论的 documentid
• parentdocumentid = 该评论所回复的评论的 documentid
• topleveldocumentid = 评论的博客文章的 documentid 属于

问题是，使用 Javascript 以层次结构形式在 HTML 中显示这些注释的有效方法是什么？ (Jquery代码就可以)

[
    {
        "commenttext": "This is a comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343222535,
        "documentid": "c0341e96d65b11e1a91d12314301329d"
    },
    {
        "commenttext": "This is a another comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343222639,
        "documentid": "fe5209e0d65b11e1a91d12314301329d"
    },
    {
        "commenttext": "Yet another comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343297245,
        "documentid": "b2d9f0f0d70911e1903d12314301329d"
    },
    {
        "commenttext": "I have a comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343364418,
        "documentid": "1971ca6cd7a611e180fa12314301329d"
    }
]

编辑: 根据评论，我有更具体的问题: 具体来说，我的问题是:

1:这个 JSON 数据结构是链表吗？”(即每个项目指定其父项)

2:是否有一种众所周知的算法来迭代链接列表并将其显示为排序的评论层次结构？如果是，有人可以指导我查看描述吗？

3:评论层次结构是“有序树”的同义词吗？

谢谢

Answer 1

使用下划线库作为模板，并使用 for ... in 循环来循环遍历数组中的每个对象(注释)。

以下是使用此方法时应遵循的基本模式的模型:

var data = {...your json obj...},
    markup = $("#tmpl").html(),
    commentTmpl = _.template(markup);

for (comment in data) {
    $("#comment-list").append( commentTmpl(comment) );
}

还有你的模板:

<script type="javascript/template">
    <li><%= commenttext %></li>
</script>

阅读这些内容来学习:

• 主干模板文档:http://underscorejs.org/#template
• jQuery 文档:http://jQuery.com (使用搜索功能了解任何 jQuery 方法)