JavaScript 读取 JSON 数据

什么是 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输。它以易读的文本格式存储数据，非常适合用于不同语言之间的数据交互。在 JavaScript 中，JSON 数据可以直接作为对象使用，或者将其转换为 JavaScript 对象进行处理。

JSON 数据的结构

JSON 数据由键值对组成，键和值之间使用冒号分隔，不同的键值对使用逗号分隔。值可以是字符串、数字、布尔值、数组、对象或 null。下面是一个简单的 JSON 数据示例：

{
  "name": "John Smith",
  "age": 30,
  "isMarried": false,
  "hobbies": ["reading", "running", "cooking"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY"
  }
}

JavaScript 中如何读取 JSON 数据

在 JavaScript 中，可以使用内置的 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。这个方法接受一个 JSON 字符串作为参数，并返回相应的 JavaScript 对象。以下是一个示例：

const jsonString = '{"name":"John Smith","age":30,"isMarried":false,"hobbies":["reading","running","cooking"],"address":{"street":"123 Main St","city":"New York","state":"NY"}}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // 输出：John Smith
console.log(jsonObject.hobbies[0]); // 输出：reading
console.log(jsonObject.address.city); // 输出：New York

在上面的代码中，我们首先定义了一个包含 JSON 字符串的变量 jsonString。然后，我们使用 JSON.parse() 方法将这个 JSON 字符串转换为 JavaScript 对象，并将结果赋值给变量 jsonObject。最后，我们可以通过访问对象的属性来读取 JSON 数据的值。

使用 fetch API 读取外部 JSON 文件

除了读取内部的 JSON 数据，我们还可以使用 fetch API 从外部的 JSON 文件中获取数据。fetch API 是一种现代的网络请求方法，可以发送 HTTP 请求，并返回一个 Promise 对象。

以下是一个从外部 JSON 文件获取数据的示例代码：

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

在上面的代码中，我们使用 fetch 函数发送一个 GET 请求，请求的 URL 是 data.json，这是一个包含 JSON 数据的文件。fetch 函数返回一个 Promise 对象，我们可以使用 then 方法处理成功的响应，并将响应的结果转换为 JSON 对象。最后，我们可以通过访问对象的属性来读取 JSON 数据的值。

需要注意的是，fetch API 是基于 Promise 的，所以在处理响应时，我们可以链式调用多个 then 方法，以处理不同的响应。

总结

在 JavaScript 中，我们可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，以读取 JSON 数据的值。此外，我们还可以使用 fetch API 发送 HTTP 请求，从外部的 JSON 文件中获取数据。

通过 JavaScript 读取 JSON 数据，我们可以方便地处理和操作来自不同来源的数据，实现前后端之间的数据交互。同时，JSON 数据的结构清晰简洁，易于阅读和解析，非常适合用于数据传输和存储。

参考链接

  • [JSON - MDN](

代码流程图

flowchart TD;
  start[开始]-->parse[解析JSON字符串];
  parse-->access[访问JSON数据];

关系图

erDiagram
  address }|..| jsonObject : has

以上是关于 JavaScript 读取 JSON 数据的科普文章，希望对你有所帮助。通过理解 JSON 的结构和使用 JavaScript 读取 JSON 数据的方法，你可以更加灵活地处理和操作不同来源的数据。