前端开发TIP：如何在JavaScript中循环遍历JSON响应

作者：Terry2021.04.21来源：Web前端之家浏览：6661评论:0

关键词：js json

从远程服务器获取数据时，服务器的响应通常为JSON格式。在此快速提示中，我将演示如何使用JavaScript解析服务器的响应，以便访问所需的数据。

该过程通常包括两个步骤：将数据解码为本机结构（例如数组或对象），然后使用JavaScript的一种内置方法遍历该数据结构。在本文中，我将使用大量可运行的示例来介绍这两个步骤。

什么是JSON？

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

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

从Web服务器接收数据时，数据始终是字符串，这意味着将其转换为可以使用的数据结构是您的工作。

如果您想了解有关JSON如何工作的更多信息，请访问JSON网站。

从远程API提取JSON

在以下示例中，我们将使用icanhazdadjoke API。正如您在其文档中所看到的那样，在将Accept标头设置为GET的情况下发出GET请求，application/json将会看到API返回JSON有效负载。

让我们从一个简单的例子开始：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText);
    console.log(xhr.responseText);
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

// string
// {"id":"daaUfibh","joke":"Why was the big cat disqualified from the race? Because it was a cheetah.","status":200}

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

if (xhr.readyState === XMLHttpRequest.DONE) {
  const res = JSON.parse(xhr.responseText);
  console.log(res);};// Object { id: "fiyPR7wPZDd", joke: "When does a joke become a dad joke? When it becomes apparent.", status: 200 }

一旦我们将响应作为JavaScript对象，就可以使用多种方法遍历该对象。

使用`for...in`循环

for…in循环遍历对象的所有可枚举属性：

const res = JSON.parse(xhr.responseText);

for (const key in res){
  if(obj.hasOwnProperty(key)){
    console.log(`${key} : ${res[key]}`)
  }
}

// id : H6Elb2LBdxc
// joke : What's blue and not very heavy?  Light blue.
// status : 200

请注意，for...of循环将遍历整个原型链，因此在这里我们hasOwnProperty用来确保属性属于我们的res对象。

使用`Object.entries`，`Object.values`或`Object.entries`

上面的一种替代方法是使用Object.keys()，Object.values()或Object.entries()中的一个。这些将返回一个数组，然后我们可以对其进行迭代。

让我们来看看使用Object.entries。这将返回我们传递给它的对象的键/值对的数组：

const res = JSON.parse(xhr.responseText);Object.entries(res).forEach((entry) => {
  const [key, value] = entry;
  console.log(`${key}: ${value}`);});// id: SvzIBAQS0Dd // joke: What did the pirate say on his 80th birthday? Aye Matey!// status: 200

请注意，const [key, value] = entry;语法是ES2015中引入的数组解构示例。

这更加简洁，避免了前面提到的原型问题，并且是我首选的遍历JSON响应的方法。

使用提取API

尽管上面使用XMLHttpRequest对象的方法效果很好，但很快就会变得笨拙。我们可以做得更好。

该提取API是基于承诺的API，它使一个更清洁，更简洁的语法和可以帮助您摆脱回调地狱。它提供了fetch()在window对象上定义的方法，您可以使用该方法执行请求。此方法返回一个Promise，可用于检索请求的响应。

让我们重写前面的示例以使用它：

(async () => {
  const res = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const json = await res.json();
  Object.entries(json).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });})();// id: 2wkykjyIYDd// joke: What did the traffic light say to the car as it passed? "Don't look I'm changing!"// status: 200

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

处理数组

如本文顶部所述，值的有序列表（也称为数组）是有效的JSON，因此在完成之前，让我们研究如何处理此类响应。

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

(async () => {
  async function getRepos(username) {
    const url = `https://api.github.com/users/${username}/repos`;

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

    return repositories;
  }

  const repos = await getRepos('jameshibbard');
  console.log(repos);
})();

// Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

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

repos.forEach((repo) => {
  console.log(`{$repo.name} has ${repo.stargazers_count} stars`);
});

// Advanced-React has 0 stars 
// angular2-education has 0 stars
// aurelia-reddit-client has 3 stars
// authentication-with-devise-and-cancancan has 20 stars
// ...

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

repos.forEach((repo) => {
  Object.entries(repo).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
});

// name: Advanced-React
// full_name: jameshibbard/Advanced-React
// private: false
// ...