如何将 JSON 结构表示为 HTML 中的组织树？答案

【问题标题】：How to represent a JSON structure as an organizational tree in HTML?如何将 JSON 结构表示为 HTML 中的组织树？
【发布时间】：2019-07-03 20:38:40
【问题描述】：

我有一个嵌套的 json 对象，它表示父节点与其子节点之间的一对多关系。我想将此 json 表示为 HTML 中的组织结构图。我发现我可以使用 Google Charts 来做到这一点，但我不确定 Google Charts 是否让您能够设计盒子或对设计进行任何修改。

有人知道我可以学习的任何资源吗？

这是我构造的json对象：

{ 'id': 1,
  'name': 'Parent Node',
  'description': 'First Parent Node',
  'children': [
  {
      'id': 2,
      'name': 'child1',
      'description': 'child1',
      'children': [
      {
          'id': 4,
          'name': 'grand1',
          'description': 'grand1',
          'children': []
       }]
   },
   {
       'id': 3,
       'name': 'child2',
       'description': 'child2',
       'children': []
   }]
 }

这个问题Representing Binary Tree Structure in Web browser也类似，但是链接好像失效了。

【问题讨论】：

嗨，到目前为止，您尝试了什么？
请阅读help center，特别是asking 和What types of questions should I avoid asking? 上的页面。 "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic"
@GalAbra 我什么都没尝试，因为我不知道从哪里开始。我正在寻求任何我可以学习的资源来帮助我开始。
Create Tree map in HTML using json object的可能重复
我只是在 Google 上搜索了你的问题 :)

标签： html json hierarchical-data

【解决方案1】：

这是您提到的另一个问题的链接的工作版本：http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

【讨论】：

【解决方案2】：

我不确定你希望你的显示器是什么样子，所以这里有两个可行的答案：

您只需要层次结构：只需递归遍历您的 JSON 并创建 ul 和 li 标签，然后添加 CSS 进行改进（您可能会在 Codepen.io 上找到适合您需要的内容）或使用您找到的其他帖子的链接（http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html 和 http://experiments.wemakesites.net/css3-treeview.html）
您希望它能够流畅地显示并且不介意使用外部库：使用类似：https://www.graphdracula.net/ 或此处列出的https://dzone.com/articles/top-5-javascript-libraries-to-create-an-org-chart 之一。您需要转换数据以符合图书馆的需求，但这通常是值得的。

【讨论】：