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 教程。