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

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
}

编辑:忽略nullparentId。这只是一个模拟文档。每个子评论都会有一个相应的 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在注释前添加空格以缩进的信息。