首页 前端知识 在js脚本中直接引入本地json文件

在js脚本中直接引入本地json文件

2024-02-02 09:02:01 前端知识 前端哥 798 451 我要收藏

遇到一个需要引入本地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()方法

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1111.html
标签
json
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!