从 JSON 文件中获取数据 - JavaScript

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它可以被 JavaScript 语言轻易地解析和使用。在很多情况下，我们需要从一个 JSON 文件中获取数据并在我们的 JavaScript 代码中使用它们。本篇文章将介绍如何使用 JavaScript 从一个 JSON 文件中获取数据。

读取 JSON 文件

我们可以使用 AJAX 请求来读取 JSON 文件。JavaScript 定义了一个名为 XMLHttpRequest 的对象，它能够与服务器异步交换数据。下面是一个使用 AJAX 请求读取 JSON 文件的代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/file.json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        // 处理数据
    }
};
xhr.send();

在这段代码中，我们首先创建了一个 XMLHttpRequest 对象，并使用 xhr.open() 方法打开一个 GET 请求。然后，我们给 xhr.onreadystatechange 属性赋值一个函数，该函数将在请求状态发生改变时被调用。当 xhr.readyState 等于 XMLHttpRequest.DONE 时（请求已经完成），并且 xhr.status 等于 200 时（请求成功），我们通过 JSON.parse() 方法将返回的 JSON 字符串转换成一个 JavaScript 对象（或数组）。在转换完成后，我们可以对数据进行处理。

处理 JSON 数据

一旦我们成功地从 JSON 文件中读取了数据并转换成一个 JavaScript 对象，我们就可以在代码中使用它们了。下面是一些常见的处理 JSON 数据的示例：

获取对象属性值

假设我们有以下 JSON 数据：

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

我们可以使用点符号或方括号来获取其属性值：

var data = JSON.parse(xhr.responseText);
console.log(data.name);  // 输出 "Alice"
console.log(data['age']);  // 输出 25

注意，方括号里必须是一个字符串。如果我们使用一个变量来存储属性名，我们应该使用方括号：

var propName = 'name';
console.log(data[propName]);  // 输出 "Alice"

遍历数组

假设我们有以下 JSON 数据：

[
    {"name": "Alice", "age": 25},
    {"name": "Bob", "age": 30},
    {"name": "Charlie", "age": 35}
]

我们可以使用 for 循环来遍历数组：

var data = JSON.parse(xhr.responseText);
for (var i = 0; i < data.length; i++) {
    console.log(data[i].name + ' is ' + data[i].age + ' years old.');
}

总结

读取和处理 JSON 数据是非常常见的任务。在 JavaScript 中，我们可以使用 AJAX 请求来读取 JSON 文件，并使用 JSON.parse() 方法将其转换成一个 JavaScript 对象。一旦转换完成，我们可以使用点符号或方括号来获取对象属性值，或使用 for 循环来遍历数组。