×

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

作者:Terry2021.04.21来源:Web前端之家浏览:6388评论:0
关键词:jsjson

从远程服务器获取数据时,服务器的响应通常为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.entriesObject.valuesObject.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
// ...

结论

在这个快速提示中,我们研究了什么是JSON。我已经演示了如何将服务器的JSON响应解析为本机数据结构(例如数组或对象),以及如何遍历这种结构以访问其中包含的数据。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20210421sdf.html

网友评论文明上网理性发言 已有0人参与

发表评论: