1. 确保使用WebStorm开发，否则在本地测试有跨域提示

2. 主文件，要引入JQuery库

<!DOCTYPE html>
<html lang="ZH_CN">

<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
<div id="content">

</div>
</body>
<script> $(document).ready( function () { var content = $("#content"); $.getJSON("data.json", "", function (data) { for (var i = 0; i < data.data.course_chapter.length; i++) { console.log(data.data.course_chapter[i].name) content.append( '<h6>' + data.data.course_chapter[i].name + '</h6>' ); for (let j = 0; j < data.data.course_chapter[i].section_leaf_list.length; j++) { console.log(data.data.course_chapter[i].section_leaf_list[j].name) content.append( '<p>' + data.data.course_chapter[i].section_leaf_list[j].name + '</p>' ); } } console.log(data.data) }); }); </script>

</html>

3. 要解析的JSON文件

{
  "data": {
    "course_chapter": [
      {
        "section_leaf_list": [
          {
            "order": 1,
            "leaf_list": [
              {
                "name": "piazza访问和使用",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317334,
                "leaf_type": 0,
                "id": 597197,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 1,
                "leafinfo_id": 597196
              },
              {
                "name": "html",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317334,
                "leaf_type": 3,
                "id": 597198,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 2,
                "leafinfo_id": 597197
              }
            ],
            "chapter_id": 67260,
            "id": 317334,
            "name": "0.1 Piazza讨论区"
          },
          {
            "order": 2,
            "leaf_list": [
              {
                "name": "实验平台使用帮助",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317335,
                "leaf_type": 0,
                "id": 597200,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 1,
                "leafinfo_id": 597199
              },
              {
                "name": "平台使用帮助",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317335,
                "leaf_type": 3,
                "id": 597201,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 2,
                "leafinfo_id": 597200
              },
              {
                "name": "Gitlab使用帮助",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317335,
                "leaf_type": 3,
                "id": 597202,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 3,
                "leafinfo_id": 597201
              },
              {
                "name": "IBM内部账号初始化",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317335,
                "leaf_type": 3,
                "id": 597203,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 4,
                "leafinfo_id": 597202
              }
            ],
            "chapter_id": 67260,
            "id": 317335,
            "name": "0.2 在线实验平台"
          },
          {
            "order": 3,
            "leaf_list": [
              {
                "name": "Raw HTML",
                "is_locked": false,
                "start_time": 1574035200000.0,
                "chapter_id": 67260,
                "section_id": 317336,
                "leaf_type": 3,
                "id": 597205,
                "is_show": true,
                "end_time": 0,
                "score_deadline": 1578844799000.0,
                "is_score": true,
                "is_assessed": false,
                "order": 1,
                "leafinfo_id": 597203
              }
            ],
            "chapter_id": 67260,
            "id": 317336,
            "name": "0.2在线实验平台"
          }
        ],
        "order": 1,
        "id": 67260,
        "name": "第零讲 在线教学环境准备"
      }
    ]
  },
  "success": true
}

4. 实现效果