在 JavaScript 中循环遍历 JSON 数组 · ZetCode 中文系列教程

# 在 JavaScript 中循环遍历 JSON 数组 > 原文： [http://zetcode.com/javascript/jsonforeach/](http://zetcode.com/javascript/jsonforeach/) JSON `forEach`教程展示了如何在 JavaScript 中循环遍历 JSON 数组。在本教程中，我们使用 JSON 服务器来处理测试数据。 json 服务器是一个 JavaScript 库，用于创建测试 REST API。首先，我们创建一个项目目录并安装`json-server`模块。 ```js $ mkdir jsonforeach $ cd jsonforeach $ npm init -y $ npm i -g json-server ``` JSON 服务器模块与`npm`一起全局安装。 ## JSON 测试数据我们有一些 JSON 测试数据： `users.json` ```js { "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" } ] } ``` ```js $ json-server --watch users.json ``` `--watch`命令用于指定服务器的数据。 ```js $ 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`循环返回的数据。 `index.html` ```js <!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 服务器测试数据中获取数据并将其记录到浏览器控制台中。 `main.js` ```js 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()`，我们遍历了数组。 ```js Object.entries(obj).forEach(([key, value]) => { console.log(`${key} ${value}`); }); ``` 我们遍历每个对象的条目，并将键和值打印到控制台。 ```js 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 数组。您可能也对以下相关教程感兴趣：[数据表 JSON 服务器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)， [faker.js 教程](/javascript/fakerjs/)或[在 JavaScript 中从 URL 读取 JSON](/articles/javascriptjsonurl/)。