如何在JavaScript中循环遍历JSON响应

时间：2025-04-07 08:54:38

从远程服务器获取数据时，服务器的响应通常为JSON格式。在本文中，我将演示如何使用JavaScript解析服务器的响应，以便访问所需的数据。该过程通常包括两个步骤：将数据解码为本机结构（例如数组或对象），然后使用JavaScript的内置方法遍历该数据结构。

一、 什么是JSON？

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。（画外音：JSON之父叫做Douglas Crockford，尽管他在社区里不算那么讨喜，不过也无法否认他对JavaScript所作的贡献，著名的开源项目JSlint也是他写的，他还有出版一本书叫How JavaScript Works，中文译名《JavaScript语言精粹》）

数据可以通过两种方式存储在JSON中：

  1. 名称/值对的集合（又名JSON对象）
  2. 值的有序列表（又名JSON数组）

从Web服务器接收数据时，数据始终是字符串，这意味着将其转换为可以使用的数据结构是必要工作，如果您想了解有关JSON如何工作的更多信息

二、从远程API获取接口

1. 使用XMLHttpRequest API

const xhr = new XMLHttpRequest();
 = () => {
    if ( === ) {
        (typeof );
        ();
    }
};
('GET', '', true);
('Accept', 'application/json');
(null);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

返回的数据为：

// string
// {"id":"helloworld","joke":"today is Friday!","status":200}
  • 1
  • 2

服务器返回了一个字符串。我们需要先将其解析为JavaScript对象，然后才能遍历其属性。我们可以使用()做到这一点,如下显示：

if ( === ) {
    const res = ();
    (res);
};
//Object { id: "helloworld", joke: "today is Friday!", status: 200 }
  • 1
  • 2
  • 3
  • 4
  • 5

2. 使用Fetch API

尽管上面使用XMLHttpRequest对象的方法效果很好，但在复杂的场景下它就会变得非常笨拙。下面我们使用浏览器新提供的api,它是window对象上定义的方法fetch，你可以使用该方法执行请求。此方法返回一个Promise，可用于检索请求的响应。

(async () => {
    const res = await fetch('/', {
        headers: { Accept: 'application/json' },
    });
    const json = await ();
    (json).forEach(([key, value]) => {
        (`${key}: ${value}`);
    });
})();

// id : helloworld
// joke : today is Friday
// status : 200
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Fetch API返回响应流。这不是JSON，因此()需要尝试使用它的()函数而不是对其进行调用。这将返回一个Promise，该Promise会将响应的正文文本解析为JSON的结果进行解析。

三、 多种方式遍历数据

1. 使用for…in

const res = ();

for (const key in res){
    if((key)){
        (`${key} : ${res[key]}`)
    }
}

// id : helloworld
// joke : today is Friday
// status : 200
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2. 使用，或

const res = ();

(res).forEach((entry) => {
    const [key, value] = entry;
    (`${key}: ${value}`);
});

// id : helloworld
// joke : today is Friday
// status : 200
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3. 处理数组

值的有序列表（也称为数组）也是有效的JSON，让我们研究如何处理此类响应。

对于这个示例，我们将使用GitHub的REST API来获取用户存储库的列表：

(async () => {
  async function getRepos(username) {
    const url = `/users/${username}/repos`;

    const response = await fetch(url);
    const repositories = await ();

    return repositories;
  }

  const repos = await getRepos('sylove');
  (repos);
})();

// Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

如您所见，API返回了一个对象数组。要访问每个单独的对象，我们可以使用常规forEach方法：

((repo) => {
  (`${} has ${repo.stargazers_count} stars`);
});

// CQ has 0 stars
// VM99:14 Food has 1 stars
// VM99:14 vue-blog-generater has 0 stars
// VM99:14 YouDe has 0 stars
// ...
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

另外，您当然可以使用上面讨论的任何方法来遍历对象的所有属性，并将它们记录到控制台：

((repo) => {
  (repo).forEach(([key, value]) => {
    (`${key}: ${value}`);
  });
});

// id: 187614270
// VM104:15 node_id: MDEwOlJlcG9zaXRvcnkxODc2MTQyNzA=
// VM104:15 name: CQ
// ...
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

结论

在这篇文章中，我们研究了什么是JSON。我已经演示了如何将服务器的JSON响应解析为本机数据结构（例如数组或对象），以及如何遍历这种结构以访问其中包含的数据。我们大部分web服务与服务器的交互都是围绕这个这个展开，希望这篇文章对您有所帮助。

相关文章