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

我正在写一个评论系统。对于一个特定的页面，我获取注释作为高度嵌套的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
}

编辑：忽略空的parentId。这只是一个模拟文档。除顶层注释外，每个子注释都将具有相应的parentId

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

非常感谢

编辑：我正在使用JQuery和引导。以下是我希望格式设置的示例：

编辑：看来我找到了解决方案。我正在使用jsTree，它在我的用例中似乎运行良好。

你的问题有点含糊。您能否提供一个示例，说明您希望从问题中显示的文档中获得什么样的输出？

编辑： 据我所知，此文档是用于在网页上存储评论的数据结构。文档中的内容是注释，您希望以树状结构显示这些注释

我会尝试使用递归将数据与信息（如数据处于哪个级别）进行平滑处理，然后使用该信息在页面上显示注释

例如

我没有运行此代码，因此我不能保证此代码将在您的文档上成功运行。但是，这应该让你知道如何走过它。

---

使用级别信息在注释前推送缩进空格。

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

编辑

---

因为您使用的是JQuery，所以可以使用accordios并对其进行修改，以显示每个注释中的线程。请参阅JQuery文档。

以Reddit为例。当我们加载Reddit页面时，它会加载所有注释并将它们显示为线程注释，对吗？完全一样。例如：下面是另一个包含嵌套注释的示例：此处哪个partkey是comment？您希望的输出格式是什么？注释数组是否适用于您？id:parent是根注释。它有两个孩子：child1和child2。我想要的输出格式如下：我需要在UI中显示b/w父和子注释的关系，就像Reddit一样。我使用的是Bootstrap和JQuery。下面是一个我想要的格式示例：这不是一个答案，问题是框架无关，我无法发布注释，因此答案是一个问题。

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