JS 读取本地 JSON 文件数据

JS 读取本地 JSON 文件数据

在前端开发中，经常需要读取本地的 JSON 文件数据，以便在网页上展示或者作为数据源进行操作。本文将详细介绍如何使用 JavaScript 读取本地 JSON 文件的数据，并展示一些示例代码。

1. 使用 fetch API 读取本地 JSON 文件数据

在现代的前端开发中，可以使用 fetch API 来读取本地的 JSON 文件数据。fetch API 是用来请求资源的现代化的替代方案，它对于处理 JSON 格式的数据尤为方便。

以下是使用 fetch API 读取本地 JSON 文件数据的示例代码：

fetch('data.json')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error('Error reading data.json file: ', err);
  });

在上面的代码中，我们使用 fetch 方法发起对 data.json 文件的请求，然后通过 .json() 方法将响应的数据解析为 JSON 格式。最后将解析得到的 JSON 数据打印出来。

2. 使用 XMLHttpRequest 读取本地 JSON 文件数据

除了使用 fetch API，还可以使用传统的 XMLHttpRequest 来读取本地 JSON 文件数据。XMLHttpRequest 是一个在浏览器中可以进行 HTTP 请求的对象，通过它可以异步地从服务器或者本地文件获取数据。

以下是使用 XMLHttpRequest 读取本地 JSON 文件数据的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

在上面的代码中，我们创建了一个 XMLHttpRequest 对象，然后使用 open() 方法打开一个 GET 请求，指定了要读取的本地 JSON 文件路径。然后监听其 onreadystatechange 事件，在状态码为 4（完成）且状态为 200（成功）时，通过 responseText 获取响应的数据，并将其解析为 JSON 格式。

3. 演示运行结果

为了演示以上两种方法读取本地 JSON 文件数据的运行结果，我们假设有一个名为 data.json 的本地 JSON 文件，其内容如下：

{
  "name": "Alice",
  "age": 25,
  "job": "Developer"
}

我们将以上的示例代码分别放置在一个 HTML 文件中，通过浏览器打开该 HTML 文件，可以看到在浏览器的控制台中输出了解析得到的 JSON 数据。

4. 总结

通过本文的介绍，我们学习了如何使用 JavaScript 读取本地 JSON 文件数据。使用 fetch API 或者 XMLHttpRequest 都能够实现这一目的，可以根据自己的喜好和项目需求选择合适的方法。读取本地 JSON 文件数据是前端开发中的常见操作，掌握这项技能可以使我们更加灵活地处理数据，为网页的展示和交互提供更多可能性。