极客教程JavaScript 读取JSON文件
使用JavaScript读取JSON（JavaScript对象表示法）文件。 JSON 代表JavaScript对象表示法。这意味着文本格式的脚本（可执行）文件，用于存储和传输数据。如果数据是以JSON格式呈现，那么可以轻松处理数据。我们导入的JSON文件可以来自本地服务器或Web API。基本上有三种方法用于执行此任务。
- JavaScript fetch()方法 ： 从服务器请求数据，这个请求可以是返回JSON或XML格式数据的任何API类型。
- NodeJS require()函数 ： 将文件路径作为函数的唯一参数调用require()函数，Node经历以下步骤：
- 解析和加载
- 封装
- 执行
- 返回输出
- 缓存
- JavaScript ES6 import模块 ： 你可以使用import关键字导入变量。你可以从JavaScript文件中指定你想要导入的一个或多个成员。
注意： JavaScript内部支持JSON，因此不需要额外的模块来导入和显示JSON。我们只需要导入JSON文件，可以直接对其进行操纵。
我们将对以下JSON文件进行所有方法的实现：
sample.json
{
"users":[
{
"site":"GeeksForGeeks",
"user": "Shobhit"
}
]
}
方法（使用fetch方法）：
- 创建一个JSON文件并向其中添加数据
- 打开JavaScript文件
- 在fetch方法中传递文件的地址
- 使用.json方法解析文档
- 在控制台显示内容
示例： 在这个示例中，我们将实施上述方法。
- index.html： 这个文件包含了在浏览器上运行程序的script标签。
- script.js： 这里实现了fetch方法，接收JSON文件并在控制台上显示它。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Javascript
function Func() {
fetch("./sample.json")
.then((res) => {
return res.json();
})
.then((data) => console.log(data));
}
输出：
使用require模块的方法：
- 按照之前的方法创建JSON文件。
- 创建一个script.js并使用Node的require方法导入JSON文件。
- 将数据打印到控制台上。
注意： 我们将在控制台上使用Node运行程序，而不是在浏览器上运行。请确保你至少使用Node版本17.0。
script.js
Javascript
const sample = require('./sample.json');
console.log(sample);
运行该应用的步骤：
在终端中打开当前文件夹，然后输入以下命令。
node script.js
输出:
{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }
方法（使用导入模块）：
- 根据前面的示例创建JSON文件。
- 创建script.js文件并导入JSON文件。
Javascript
import user from "./sample.json" assert { type: 'json' };;
console.log(user)
运行应用程序的步骤：
在终端中打开当前文件夹，并输入以下命令。
node script.js
输出：
{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }