JS导入本地json文件数据的三类方法举例讲解
这个本地json文件中往往保存一些（无需在js脚本中改动，又常需手动改动的一些各种设定之类的）静态数据。
第一类：将本地数据视为网络数据
使用fetch,XMLHttpRequest之类进行异步请求。
const jsnd=fetch('data.json')
.then(res=>res.json())
.then(data=>{console.log(data);return data})
.catch(err=>{console.log(err);})相关json文件数据需严格遵循json语法（比如[]内的最后不应以逗号结尾——理论上不应该但实际写代码追加数据时还要回头给前面的数据加个逗号真的很烦）不然编辑器会报警（虽然运行时一般并不会有数据读取的问题，目前没碰到过）。
异步通讯可能有点废时，还需要有配套的(本地)webserver.
第二类：将本地数据以<script src="./data.json"></script>的形式“注入”为全局变量/对象
<!DOCTYPE html> <html> <head> …… <script src="./data.json"></script> </head> <body > …… </body> </html>
相关data.json文件(可自行命名)写法会很不规范。需要在{}前加个“（全局）变量名=”：
dataJson={
原json数据
}把这个data.json文件后缀从.json改成.txt之类也能正常运转（相关的html中的src也相应地改后缀为txt,比如data.txt就行）。
也就是说这里注入的其实不是json数据，而是一段js代码;只是这段代码恰好定义了一个名为dataJson的object。
所以在相关js文件中导入/使用这个全局对象为json数据时（为求保险）宜加一个转换过程，如：
const jsnd=JSON.parse(JSON.stringify(dataJson));
或
const jsnd=JSON.parse(dataJson); //JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。
这方法无需webserver,但需要三方文件相互适配。只能用在有html的场合。
第三类：做一个专门放置这些数据的js文件，export之，再在需要的文件中import.
如：
//文件名sj.js
const sj1={
……
……
……
}
const sj2={
……
……
……
}
export {sj1,sj2}import {sj1,sj2} from './sj'思路其实是方法2改良版。
无需webserver（异步通讯）,两方文件适配。不能再简了。
……实际测试发现，这个方法的html文件在本地文件系统打开时会触发跨域问题：Access to script at 'file:……' from origin 'null' has been blocked by CORS policy：……
最简单的解决办法还是配个（本地）服务器。这就又跟方法１没太大区别了。
要想不配这个（本地）服务器，还是得在方法２上改良：
方法４：
<!DOCTYPE html> <html> <head> …… <script type="text/javascript" src="./data.js"></script> </head> <body > …… </body> </html>
／／type="text/javascript"这一小段可省略。
跟方法２的差别是这里导入的是js文件/js代码段。里边的内容就是普通的js写法。比如
const jsnd={
//json数据
}
const jsnd2={
//json数据
}上面这两json变量/对象相当于直接定义在全局（window?）中。可以在其它所有的js文件中使用。而且是直接拿来就用。
无需webserver,无需JSON.parse();Fetch;或是import之类。
非常方便。适合没有敏感数据，无需考虑安全问题的情况。
总结
到此这篇关于JS导入本地json文件数据的三类方法的文章就介绍到这了,更多相关JS导入本地json文件数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序返回上一级页面的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要为大家详细介绍了js实现简单图片拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了js实现随机数小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了JS获取短信验证码倒计时的实现代码,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了原生js实现的观察者和订阅者模式,结合简单实例形式分析了js观察者和订阅者模式的相关原理与实现技巧,需要的朋友可以参考下2020-04-04
下面小编就为大家带来一篇js实现目录链接,内容跟着目录滚动显示的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
js加强的经典分页实例，需要的朋友可以参考一下2013-03-03
下面小编就为大家带来一篇JavaScript使用atan2来绘制箭头和曲线的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了javascript设计简单的秒表计时器，该秒表将包括两个按钮和一个用于显示时间的文本框，当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显示经过的时间，需要的朋友可以参考下2015-11-11
最新评论