读取json文件，实现前端组织架构页面

首先，我们需要一个包含组织架构数据的 JSON 文件。假设我们有一个名为 `org.json` 的文件，内容如下：

{
  "name": "公司总部",
  "children": [
    {
      "name": "研发部",
      "children": [
        {
          "name": "前端组",
          "children": [
            {
              "name": "张三"
            },
            {
              "name": "李四"
            }
          ]
        },
        {
          "name": "后端组",
          "children": [
            {
              "name": "王五"
            },
            {
              "name": "赵六"
            }
          ]
        }
      ]
    },
    {
      "name": "市场部",
      "children": [
        {
          "name": "销售组",
          "children": [
            {
              "name": "小红"
            },
            {
              "name": "小明"
            }
          ]
        }
      ]
    }
  ]
}

接下来，我们需要在 HTML 文件中创建一个容器来展示组织架构。例如：

<div id="org-chart"></div>

然后，我们可以使用 jQuery 的 `getJSON()` 方法来加载 JSON 文件并处理数据。代码如下：

$.getJSON("org.json", function(data) {
  var chart = new OrgChart("#org-chart", {
    nodeBinding: {
      field_0: "name"
    },
    nodes: data.children
  });
});

这里我们使用了一个名为 `OrgChart` 的第三方库来渲染组织架构。我们传递了一个 CSS 选择器 `#org-chart` 来指定容器，以及一个配置对象，其中 `nodeBinding` 指定了节点显示的字段，`nodes` 则指定了节点数据。我们将数据的 `children` 属性传递给 `nodes`，因为根节点不需要显示在图表中。

最后，我们需要引入 `OrgChart` 库和 jQuery 库：

<script src="https://cdn.jsdelivr.net/npm/orgchart@2.1.9/dist/js/orgchart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

这样，当我们打开 HTML 文件时，就能看到一个包含组织架构的图表了。