Question

我正在编写一个评论系统。对于特定页面，我将注释作为高度嵌套的JSON获取（注释包含其子级，而子级又可能包含其他子级）。我想解析并以线程方式显示这些注释。这是一个这样的JSON的示例：

{
  "children": [
    {
      "children": [
        {
          "children": [],
          "content": "Here is a child8",
          "id": "child8",
          "pageURIHash": "3988665684",
          "parentId": null
        }
      ],
      "content": "Here is child1",
      "id": "child1",
      "pageURIHash": "3988665684",
      "parentId": null
    },
    {
      "children": [
        {
          "children": [],
          "content": "Here is child3",
          "id": "child3",
          "pageURIHash": "3988665684",
          "parentId": null
        },
        {
          "children": [],
          "content": "Here is child4",
          "id": "child4",
          "pageURIHash": "3988665684",
          "parentId": null
        },
        {
          "children": [],
          "content": "Here is a child5",
          "id": "child5",
          "pageURIHash": "3988665684",
          "parentId": null
        },
        {
          "children": [
            {
              "children": [
                {
                  "children": [],
                  "content": "Here is a child9",
                  "id": "child9",
                  "pageURIHash": "3988665684",
                  "parentId": null
                },
                {
                  "children": [],
                  "content": "Here is a child10",
                  "id": "child10",
                  "pageURIHash": "3988665684",
                  "parentId": null
                }
              ],
              "content": "Here is a child7",
              "id": "child7",
              "pageURIHash": "3988665684",
              "parentId": null
            }
          ],
          "content": "Here is a child6",
          "id": "child6",
          "pageURIHash": "3988665684",
          "parentId": null
        }
      ],
      "content": "Here is child2",
      "id": "child2",
      "pageURIHash": "3988665684",
      "parentId": null
    }
  ],
  "content": "Here is a parent comment",
  "id": "parent",
  "pageURIHash": "3988665684",
  "parentId": null
}

编辑：忽略null parentId。这只是一个模拟文件。每个子评论都会有一个相应的parentId，除了顶级评论

解决这个问题的策略是什么？我可以解析JSON，但是如何以线程方式显示注释？抱歉，如果这个问题看起来很幼稚，但我在前端方面做得还不够。

非常感谢！

编辑：我正在使用JQuery和Bootstrap。这是我希望格式化的示例：

https://www.reddit.com/r/AskReddit/comments/a9jcxo/what_are_some_nonobvious_early_signs_that_a/

编辑：看起来我找到了解决方案。我正在使用jsTree，对于我的用例来说似乎工作正常。

Answer 1

<罢工> 您的问题有点含糊。您能否提供一个示例，说明您希望问题中显示的文档的输出是什么？

编辑： 据我了解，该文档是您用于在网页上存储“注释”的数据结构。文档中的content是注释，您希望以树状结构显示它们。

我会尝试递归以将数据弄平，例如它位于哪个级别，然后使用它在页面上显示注释。

例如

let flattenedData = []; 

function flattenify(doc, level) {
  if (!level) {
    level = 0;
  }
  if (!doc || !doc.children || doc.children.length === 0) {
    return;
  }

  for (let index = 0; index < doc.children.length; index++) {
    let node = doc.children[index];
    flattenedData.push({
      content: node.content,
      id: node.id,
      pageURIHash: node.pageURIHash,
      parentId: node.parentId,
      level: level,
    });

    flattenify(node, (level + 1));
  }
}

flattenify(commentDoc); // the document that contains the json structure

console.log(flattenedData);

我尚未运行此代码，因此不保证此代码将在您的文档上成功运行。但是，这应该给您一个关于如何遍历它的想法。使用level信息在评论之前将空格插入缩进。

Answer 2

提供您正在使用的前端技术。它是有角度的，有反应的，jQuery还是其他？如果您需要更有针对性的答案，则可能还需要指定更多上下文。

编辑

由于使用的是JQuery，因此可以使用手风琴并对其进行修改以显示每个注释中的线程。请参阅JQuery文档中的Accordion。

解析嵌套的JSON并以特定格式显示

2 个答案: