十分钟,学会使用js三种方法创建本地json数据文件

本文介绍了如何利用JavaScript在浏览器环境和Node.js环境中创建并保存JSON文件。方法包括:1) 使用HTML5的a标签下载,简单但下载目录不可控;2) 通过fs.writeFile直接在Node.js中写入文件,方便且目录可控;3) 利用fsStream流,适合复杂操作。这些方法帮助开发者便捷地处理JSON数据。
摘要由CSDN通过智能技术生成

前言

在干业务时,需要得到一份全国省市到街道的区划数据,刚好业务中连接了高德地图,高德地图又提供了区划的api,这下只需要把数据写到json里了。什么!你说你还不会用js创建json文件?没关系,只需十分钟阅读文章,学会使用js三种方法创建本地json文件!

一、使用html5创建json文件

通过a标签来下载获取到我们创建的json文件。
缺点:必须要下载一次,下载目录不可控,当大量json文件下载时,会储存到同一个文件夹,显的很杂乱。

<script>
//我们写入json文件的内容
let data={
    name:"张三",
    tel:'1008611',
    age:"18"
}
let handleDownload=function(content,name){
	            // 下载保存json文件
	            var eleLink = document.createElement("a");
	            eleLink.download = name+'.json';
	            eleLink.style.display = "none";
	            // 字符内容转变成blob地址
	            var data = JSON.stringify(content, undefined, 4);
	            var blob = new Blob([data], { type: "text/json" });
	            eleLink.href = URL.createObjectURL(blob);
	            // 触发点击
	            document.body.appendChild(eleLink);
	            eleLink.click();
	            // 然后移除
	            document.body.removeChild(eleLink);
	        }
this.handleDownload(data,'测试数据')
</script>

结果:
在这里插入图片描述
在这里插入图片描述

二、通过fs.writeFile

使用fs的好处可以省略下载步骤,且下载目录是可控的。可以适应更为复杂的业务。(不会真以为前端不用学node吧?A.A)

const fs=require('fs')
// writeFile()可以接收四个参数,第一个是路径,第二个是文件内容,
//第三个可选项代表权限,第四个是回调函数。这里第三个参数通常省略
let data={
    name:"张三",
    tel:'1008611',
    age:"18"
}
//将javascript对象转换为json字符串
data = JSON.stringify(data, undefined, 4);
fs.writeFile('./js/test1.json',data,err=>{
    if(err){
        console.log('写入出错了');
    }else{
        console.log('文件写入成功');
    }
})

结果:
在这里插入图片描述

在这里插入图片描述

三、通过fs Stream流

通过Stream流,使步骤、流程更加清晰。也可以在流程中进行更多操作

const fs=require('fs')
let data={
    name:"张三",
    tel:'1008611',
    age:"18"
}

data = JSON.stringify(data, undefined, 4);
// 创建一个可以写入的流,写入到文件 newJs.txt 中
var writerStream = fs.createWriteStream('newJs.json');
// 使用 utf8 编码写入数据
writerStream.write(data,'UTF8');
// 标记文件末尾
writerStream.end();
// 处理流事件 完成和报错时执行
writerStream.on('finish', function () {
    console.log("写入完毕");
});
writerStream.on('error', function (err){
    console.log(err.stack);
});
console.log("程序执行完毕");

结果:
在这里插入图片描述
在这里插入图片描述

  • 6
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript是一种脚本语言,可以用于web开发。在web开发中,使用JSON格式来存储和传递数据是很常见的。在JavaScript中,可以通过Ajax技术从本地的JSON文件中获取数据。 首先,需要先创建一个JSON文件,可以使用任何文本编辑器创建一个空白的或者包含数据的JSON文件文件的扩展名为.json。接着,在JavaScript代码中使用Ajax技术,发送一个HTTP请求,来获取JSON文件中的数据。 例如,以下是一个使用jQuery库的示例代码: ```javascript $.getJSON('data.json', function(data) { // 处理获取到的数据 }); ``` 上面的代码中,`getJSON()`方法用于向指定URL发送GET请求,并返回一个包含JSON数据的对象。请求的URL为`data.json`,获取到的数据保存在`data`变量中,可以通过这个变量来访问和处理JSON对象中的数据。 在处理获取到的JSON数据时,可以使用JavaScript内置的JSON对象来解析和处理JSON数据。例如,可以使用`JSON.parse()`方法JSON字符串转换为JavaScript对象,然后就可以通过JavaScript语法来访问和操作JSON数据了。 ```javascript $.getJSON('data.json', function(data) { // 处理获取到的数据 var jsonObj = JSON.parse(data); console.log(jsonObj.name); // 输出JSON对象中的名称属性 }); ``` 上面的代码中,从获取到的JSON字符串中解析出一个JSON对象,然后通过JavaScript语法访问JSON对象中的名称属性,并将其输出到控制台中。 总之,JavaScript可以通过Ajax技术从本地JSON文件中获取数据,然后通过JSON对象来解析和处理JSON数据。这种方法是web开发中常用的一种获取和处理数据的方式。 ### 回答2: 在JavaScript中,我们可以使用XMLHttpRequest对象从本地json文件中获取数据。XMLHttpRequest是一个用于在Web浏览器和服务器之间发送和接收数据的JavaScript API。下面是一个简单的例子: ```javascript // 创建一个新的XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 打开文件并指定HTTP请求方法文件路径 xhr.open("GET", "path/to/your/local.json", true); // 监听load事件以在文件加载完毕后执行一些操作 xhr.onload = function() { // 如果文件成功加载,则响应状态码将是200 if (xhr.status === 200) { // 将响应文本解析为JSON对象 var data = JSON.parse(xhr.responseText); // 在控制台中输出数据 console.log(data); } }; // 发送HTTP请求以获取文件内容 xhr.send(); ``` 在上面的示例中,我们首先创建了一个新的XMLHttpRequest对象。然后,我们使用`open()`方法指定了要使用的HTTP请求方法文件路径。将`true`作为第三个参数传递以指示该请求应该是异步的。接下来,我们编写了一个`onload`回调函数,该函数会在文件加载完毕后执行。在回调函数中,我们首先检查响应状态码是否为200,以确保文件已成功加载。如果是,我们使用`JSON.parse()`方法将响应文本解析为JSON对象,并将其存储在一个变量中。最后,我们将数据输出到控制台中。 需要注意的是,如果要从本地JSON文件中获取数据,则需要将该文件放置在您的Web服务器或本地计算机上的文件夹中,并使用正确的文件路径进行调用。在不同的操作系统和Web服务器上,文件路径可能会有所不同。 ### 回答3: JavaScript是一种动态语言,可以使我们在网页中实现更多交互的效果。在网页中加载一些静态数据是很常见的需求,这时我们可以使用JavaScript从本地的JSON文件中获取数据。以下是具体的步骤。 1. 创建一个本地的json文件,例如data.json,可以使用文本编辑器创建一个。 2. 在文件中写入数据,例如: ``` { "name": "小明", "age": 20, "hobbies": ["篮球", "游泳"] } ``` 3. 在网页中添加一个script标签,并引入data.json文件,例如: ``` <script src="data.json"></script> ``` 4. 在JavaScript代码中获取数据,例如: ``` var data = {}; $.getJSON("data.json", function(result){ data = result; }); ``` 执行以上代码后,即可从本地的json文件中获取数据,并将数据存储在变量data中。上述代码使用了jQuery的getJSON方法,该方法可以自动将JSON数据转换为JavaScript对象。如果不使用jQuery,可以使用原生的XMLHttpRequest对象来获取数据,代码略有不同。 需要注意的是,由于安全性的考虑,JavaScript不允许直接从本地的文件中读取数据,需要将网页部署在web服务器上。简单的方式是使用Python自带的SimpleHTTPServer模块,使用以下命令即可快速启动一个web服务器: ``` python -m SimpleHTTPServer ``` 启动后,在浏览器中访问http://localhost:8000即可查看网页。以上就是使用JavaScript从本地json文件中获取数据的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值