51工具盒子
从远程服务器获取数据时，服务器的响应通常为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循环 {#useaforinloop}
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 {#useobjectentriesobjectvaluesorobjectentries}
上面的一种替代方法是使用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响应解析为本机数据结构（例如数组或对象），以及如何遍历这种结构以访问其中包含的数据。
