在 JavaScript 中加载 JSON 文件

Siddharth Swami 2023年1月30日 2021年10月2日
  1. 在 JavaScript 中使用 require() 函数加载 JSON 文件
  2. 在 JavaScript 中使用 fetch() 函数加载 JSON 文件
在 JavaScript 中加载 JSON 文件

JSON 代表 JavaScript Object Notion。它用于在服务器和客户端之间共享数据。JavaScript 允许我们加载本地 JSON。

我们将在本文中讨论如何加载 JSON 文件。

我们将阅读以下 JSON 文件。

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

在 JavaScript 中使用 require() 函数加载 JSON 文件

在 JavaScript 中,我们可以使用 require() 方法来加载文件和模块。这需要保存它的本地文件的路径。在 console.log() 函数的帮助下,它将数据加载到服务器中并显示出来。

例如,

const jsonData= require('./students.json'); 
console.log(jsonData);

输出:

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

在 JavaScript 中使用 fetch() 函数加载 JSON 文件

此函数从保存文件的路径中获取文件,然后将该文件作为 console.data 中的响应返回。此功能仅适用于基于 Web 的环境,因为 fetch API 仅适用于该环境。

读取文件后,我们使用 json() 函数解析数据并显示它。

下面的代码演示了上述功能。

fetch("./students.json")
.then(response => {
   return response.json();
})
.then(jsondata => console.log(jsondata));

输出:

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

相关文章 - JavaScript JSON