跳转至

在 JavaScript 中循环遍历 JSON 数组

原文： http://zetcode.com/javascript/jsonforeach/

JSON forEach教程展示了如何在 JavaScript 中循环遍历 JSON 数组。 在本教程中，我们使用 JSON 服务器来处理测试数据。

json 服务器是一个 JavaScript 库，用于创建测试 REST API。

首先，我们创建一个项目目录并安装json-server模块。

$ mkdir jsonforeach
$ cd jsonforeach
$ npm init -y
$ npm i -g json-server

JSON 服务器模块与npm一起全局安装。

JSON 测试数据

我们有一些 JSON 测试数据：

users.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循环返回的数据。

index.html

<!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

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 数组。

您可能也对以下相关教程感兴趣：数据表 JSON 服务器教程， Axios 教程， faker.js 教程或在 JavaScript 中从 URL 读取 JSON。

回到顶部