JSON forEach 教程展示了如何在 JavaScript 中循环遍历 JSON 数组。在本文中，我们使用 JSON 服务器来处理测试数据。
json-server 是一个用于创建测试 REST API 的 JavaScript 库。
首先，我们创建一个项目目录并安装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-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 示例
在下一个示例中，我们使用获取 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('http://localhost: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 数组。
列出所有 JavaScript 教程。
