在 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/)。