在 JS 中打开 JSON 文件以访问数据

在 JavaScript 中，我们经常需要读取 JSON 文件以获取其中的数据。JSON 文件包含了键值对的集合，非常适合存储结构化数据。

读取 JSON 文件

JavaScript 提供了 XMLHttpRequest 对象来进行网络请求。我们可以使用 XMLHttpRequest 对象来读取 JSON 文件。下面是读取 data.json 文件并将其解析为 JSON 对象的代码片段：

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求方式和请求地址
xhr.open('GET', 'data.json');

// 监听 readyState 变化事件
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，解析响应数据
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

// 发送请求
xhr.send();

我们可以通过 XMLHttpRequest 对象的 open 方法设置请求方式和请求地址，然后通过 send 方法发送请求。在 onreadystatechange 事件中，我们可以获取响应数据并解析为 JSON 对象。在本例中，我们将打印解析后的 JSON 对象到控制台。

访问 JSON 数据

读取 JSON 文件后，我们可以访问其中的数据。JSON 对象可以通过点语法或方括号语法访问属性。下面是访问 data.json 文件中的数据的代码片段：

// 访问 data.json 文件中的数据
const data = {
  "name": "John Doe",
  "email": "johndoe@example.com",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "555-555-5555"
    },
    {
      "type": "work",
      "number": "555-123-4567"
    }
  ]
};

console.log(data.name);            // John Doe
console.log(data.address.city);    // New York
console.log(data['age']);          // 30
console.log(data['phoneNumbers'][0]['number']);  // 555-555-5555

在本例中，我们定义了一个名为 data 的 JSON 对象。我们可以通过点语法或方括号语法访问其中的属性。如果属性名包含空格或其他特殊字符，我们只能使用方括号语法来访问属性。

总结

通过使用 XMLHttpRequest 对象，我们可以轻松地读取 JSON 文件，并将其解析为 JavaScript 对象。读取 JSON 文件后，我们可以通过点语法或方括号语法访问其中的数据。JSON 文件是一种非常有用的数据格式，它简单易读，并且易于在不同编程语言之间传递。