0


JS原生读取 本地 JSON

开发期间可能会遇到需要读取的JSON以文件形式储存在本地的情况

当用户可以手动选择文件时:

    这个情况就很常见也很好解决了,我们可以使用类型为**file**的**input**标签。

假设我们有一个ID为“fileInput”、类型为“file”的input标签。

<input type="file" id="fileInput" />
    那么JS代码就可以这样写:

首先,获取到页面中input标签的DOM元素

let inputDOM = document.getElementById("fileInput");

然后获取这个DOM元素中用户所上传文件的文本内容

let fileText = inputDOM.files[0];

接着,新建一个FileReader对象

let reader = new FileReader();

将刚刚获取到的文件内容放入新建的reader,并指定文件所使用的编码方式

reader.readAsText(fileText,"UTF-8");

** 注意,FileReader是一个异步运行的API **

在reader工作完成后,运行一些代码,将读取到的内容“丢”出来

reader.onload = function(){
    //这里的代码将在FileReader完成工作之后运行
}
    这个匿名函数内可以这样写:

            获取FileReader读取的结果
let content = reader.result;
//这里也可以简写FileReader的名字为“this”
let content = this.result;
            用JSON.parse把结果转换为JSON对象
let JSONobject = JSON.parse(this.result);
            把提取到的JSON对象赋值给在合适位置声明过的函数
SmoeVariable = JSONobject

当文件固定储存在某目录时:

这种情况不多见,但确实是更快速解决某些问题的奇怪方法。

** 由于浏览器安全策略,正常途径无法指定目录读取本地文件 **

但可以取个巧,对JSON文件做一点小改动,就能把JSON作为JS文件引入网页了。

//原本的JSON:
{
    "a": "AA",
    "b": 22.22,
    "c": true,
    "d": ["d1",2,false,{null}]
}

//简单改动一下:
data = {
    "a": "AA",
    "b": 22.22,
    "c": true,
    "d": ["d1",2,false,{null}]
}

添加等号和前方的变量名之后,JSON就变成了JS代码,隐式声明了一个变量,并将整段JSON作为对象赋值给它。

“data”可以按需定义,只要将这个文件使用script标签引入文档即可。

Tips:这样的文件可以使用innerHTML或者creatElement动态引入

标签: json javascript 前端

本文转载自: https://blog.csdn.net/weixin_43034164/article/details/127608340
版权归原作者 一只叫一行的喵 所有, 如有侵权,请联系我们删除。

“JS原生读取 本地 JSON”的评论:

还没有评论