如何使用 JavaScript 读取 JSON 文件

JSON（JavaScript Object Notation）是一种常用的轻量级数据格式，广泛用于 web 应用中。在 JavaScript 中，我们常常需要使用 JSON 文件来存储和传输数据。本文将介绍如何使用 JavaScript 读取 JSON 文件。

读取 JSON 文件的方法

在 JavaScript 中，我们可以通过 HTTP 请求或本地文件系统来读取 JSON 文件。以下是两种方法的简单介绍。

使用 HTTP 请求读取 JSON 文件

如果 JSON 文件存储在远程服务器上，我们可以使用 XMLHttpRequest 对象来请求 JSON 数据。以下是一个简单的实例：

let xhr = new XMLHttpRequest();   // 创建 XMLHttpRequest 对象
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let data = JSON.parse(this.responseText);   // 将 JSON 数据解析为 JavaScript 对象
    console.log(data);   // 输出解析后的数据
  }
};
xhr.open("GET", "data.json", true);   // 发送 GET 请求
xhr.send();   // 发送请求并获取数据

在上面的代码中，我们使用 XMLHttpRequest 对象发送了一个 GET 请求，获取名为 data.json 的 JSON 文件，并将其解析为 JavaScript 对象。如果请求成功，我们可以在控制台中看到解析后的数据。

使用本地文件系统读取 JSON 文件

如果 JSON 文件存储在本地文件系统上，我们可以使用 File API 来读取文件，并将其解析为对象。以下是一个简单的实例：

fetch("data.json")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

在上面的代码中，我们使用 fetch 函数获取名为 data.json 的本地文件，并将其解析为 JavaScript 对象。如果请求成功，我们可以在控制台中看到解析后的数据。

将读取到的 JSON 数据应用到项目中

读取 JSON 文件后，我们可以将其应用于项目中。以下是一个简单的实例：

let xhr = new XMLHttpRequest();   // 创建 XMLHttpRequest 对象
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let data = JSON.parse(this.responseText);   // 将 JSON 数据解析为 JavaScript 对象
    displayData(data);   // 调用 displayData 函数将数据显示在页面中
  }
};
xhr.open("GET", "data.json", true);   // 发送 GET 请求
xhr.send();   // 发送请求并获取数据

function displayData(data) {
  let output = "";
  for (let i = 0; i < data.length; i++) {
    output += "<li>" + data[i].name + "</li>";   // 将数据渲染为 HTML 标签
  }
  document.getElementById("result").innerHTML = output;   // 将渲染后的标签添加到页面中
}

在上面的代码中，我们读取名为 data.json 的 JSON 文件，并将其解析为 JavaScript 对象。然后，我们调用 displayData 函数将数据显示在页面中。在 displayData 函数中，我们将数据渲染为 HTML 标签，并将其添加到页面中的容器中。

总结

在 JavaScript 中，我们可以使用 HTTP 请求或本地文件系统来读取 JSON 文件。读取文件后，我们可以将其应用于项目中。如果您之前不了解如何读取 JSON 文件，本文应该能为您提供帮助。