在js脚本中直接引入本地json文件_js引入json文件并使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46007991/article/details/125930245

本文介绍如何在HTML中使用纯JavaScript导入本地JSON文件，并展示如何解析数据。重点在于不依赖jQuery，通过`<script>`标签实现数据加载和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个需要引入本地json文件的问题，同时又不能使用jQuery包

首先需要在本地创建json文件

在json中定义一个对象保存数据

var jsonData2 = {
    "businessCode": "success",
    "count": 4,
    "currentTime": 1658386745555,
    "description": "",
    "resultSet": [
        {
            "id": 1488,
            "code": "media_80522792-f192-4f11-b824-3cd9436ac17f",
            "name": "新大头儿子小头爸爸 第二季",
            "genreCode": "genre_a6325b19-85d2-48bf-a793-1501c48c8ca9",
            "currentEpisodeNumber": 102,
            "type": "103",
            "template": null,
            "img1": null,
            "img2": "./movie1.png",
            "img3": null,
            "mark": null,
            "seq": 1617950689,
            "tag": null,
            "cp": null,
            "playTimes": null,
            "score": null,
            "fee": 1,
            "desc": "一个中国典型的三口之家，八零后的父母——小头爸爸和围裙妈妈，一个调皮可爱的的大头儿子。他们生活在现代化的城市中，过着平凡并充满乐趣的生活。 ",
            "param2": "20000002000000000000000006699471",
            "param6": 12,
            "param7": 28,
            "param8": "0013",
            "param9": 6,
            "param10": 102
        }
    ]
}

有些json文件格式可能会提示报错，类似这种

但不需要管他，也不需要导出实例

在HTML脚本中使用导入js文件的方法将json文件导入即可使用，要注意json文件和js文件的先后顺序，json文件一定要在要调用json文件的js脚本之前

<script type="text/javascript" src="../jsonData2.json"></script>
<script type="text/javascript" src="./index.js"></script>

接下来就可以在index.js里面直接调用json文件里定义的对象

var bookList = [];
            for (var i = 0; i < jsonData2.resultSet.length; i++) {
                if (jsonData2.resultSet[i]) {
                    bookList.push(jsonData2.resultSet[i])
                }
            }

我这边是直接自己将数据分割了，也可以用JSON.parse()方法