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