从远程服务器获取数据时,服务器的响应通常为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 // ...
结论
在这个快速提示中,我们研究了什么是JSON。我已经演示了如何将服务器的JSON响应解析为本机数据结构(例如数组或对象),以及如何遍历这种结构以访问其中包含的数据。
网友评论文明上网理性发言 已有0人参与
发表评论: