如何在JavaScript中显示评论线程层次结构?

时间:2012-07-28 01:13:56

标签: javascript json

我在JSON中有一组注释。 此JSON将加载到浏览器中。 我希望将注释显示为线程注释层次结构,首先是最新注释。 我已经做了很多搜索以找到正确的算法。当然这是一个已解决的问题,但我找不到它。

解释JSON字段:

  • createdtime = epochseconds(评论创建的时间)
  • documentid =此评论的文件记录
  • parentdocumentid =此评论是对
  • 的回复的评论的文档
  • topleveldocumentid = blogmentid的博客文章评论 属于

问题是,使用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:评论层次结构是“有序树”的同义词吗?

感谢

1 个答案:

答案 0 :(得分:0)

使用下划线库作为模板,并使用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>

阅读这些内容以了解: