JQuery獨取本地JSON文件

原創

2020-02-22 09:51

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
}