在 JavaScript 中循环 JSON 数组
上次修改时间 2025 年 7 月 5 日
在本教程中，您将学习如何使用 forEach 在 JavaScript 中循环 JSON 数组。我们提供清晰的示例和提示，帮助您在实际项目中处理动态 JSON 数据。
json-server 是一个轻量级的 JavaScript 库，可让您快速设置一个 模拟 REST API，用于测试和原型设计前端应用程序。它非常适合在没有后端的情况下模拟真实数据。
首先，我们创建一个项目目录并安装 json-server 模块。
$ mkdir jsonforeach $ cd jsonforeach $ npm init -y $ npm i -g json-server
JSON 服务器模块使用 npm 全局安装。
JSON 测试数据
我们有一些 JSON 测试数据
{
"users": [
{
"id": 1,
"first_name": "Robert",
"last_name": "Schwartz",
"email": "rob23@gmail.com"
},
{
"id": 2,
"first_name": "Lucy",
"last_name": "Ballmer",
"email": "lucyb56@gmail.com"
},
{
"id": 3,
"first_name": "Anna",
"last_name": "Smith",
"email": "annasmith23@gmail.com"
},
{
"id": 4,
"first_name": "Robert",
"last_name": "Brown",
"email": "bobbrown432@yahoo.com"
},
{
"id": 5,
"first_name": "Roger",
"last_name": "Bacon",
"email": "rogerbacon12@yahoo.com"
}
]
}
这是一个 JSON 文件，其中包含一个用户对象数组。每个对象都有一个 id、first_name、last_name 和 email 字段。
$ json-server --watch users.json
--watch 命令用于指定服务器的数据。
$ curl localhost:3000/users/3/
{
"id": 3,
"first_name": "Anna",
"last_name": "Smith",
"email": "annasmith23@gmail.com"
}
使用 curl 命令，我们获取 ID 为 3 的用户。
JSON forEach 示例
在下一个示例中，我们使用 fetch API 通过 GET 请求检索数据。我们使用 forEach 循环返回的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home page</title>
</head>
<body>
<button id="log">Log</button>
<script src="main.js"></script>
</body>
</html>
这是 index.html 页面。通过单击 Log 按钮，我们从 JSON 服务器测试数据中获取数据，并将其记录到浏览器控制台中。
const logBtn = document.getElementById('log');
logBtn.addEventListener('click', fetchData);
async function fetchData() {
const response = await fetch('https://:3000/users/');
const data = await response.json();
data.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`);
});
console.log('-------------------');
});
}
fetch 函数从提供的 URL 中检索数据作为 JSON 数组。使用 forEach，我们遍历数组。
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`);
});
我们遍历每个对象的条目，并将键和值打印到控制台。
id 1 main.js:12:13 first_name Robert main.js:12:13 last_name Schwartz main.js:12:13 email rob23@gmail.com main.js:12:13 ------------------- main.js:14:9 id 2 main.js:12:13 first_name Lucy main.js:12:13 last_name Ballmer main.js:12:13 email lucyb56@gmail.com main.js:12:13 ------------------- main.js:14:9 ...
这是浏览器控制台中的输出。
forEach 与嵌套数组示例
在此示例中，我们有一个 JSON 数组，其中每个用户都有一个嵌套的任务数组。我们使用 forEach 遍历用户及其任务，演示如何处理嵌套数据结构。
// Sample JSON array with nested arrays
const users = [
{
id: 1,
name: 'Alice',
tasks: [
{ title: 'Fix bugs', completed: true },
{ title: 'Write tests', completed: false }
]
},
{
id: 2,
name: 'Bob',
tasks: [
{ title: 'Design UI', completed: true },
{ title: 'Create mockups', completed: true }
]
}
];
// Iterate over users and their tasks
users.forEach((user) => {
console.log(`User: ${user.name}`);
user.tasks.forEach((task, index) => {
console.log(` Task ${index + 1}: ${task.title} - ${task.completed ? '✅ Done' : '❌ Not done'}`);
});
console.log('---------------------');
});
此代码定义了一个用户 JSON 数组，其中每个用户都有一个名称和一个嵌套的任务数组。每个任务都有一个标题和一个完成状态。我们使用 forEach 遍历用户及其任务，将用户的姓名以及每个任务的标题和完成状态打印到控制台。
来源
在本文中，我们展示了如何使用 forEach 遍历 JSON 数组。