当从远程服务器获取数据时，服务器的响应往往是JSON格式的。在这个快速提示中，我将演示如何使用JavaScript来解析服务器的响应，从而访问你需要的数据。
这个过程通常包括两个步骤：将数据解码为一个本地结构（如数组或对象），然后使用JavaScript内置的方法来循环浏览该数据结构。在这篇文章中，我将使用大量可运行的例子来介绍这两个步骤。
什么是JSON？
在我们研究如何处理JSON之前，让我们花点时间来了解它是什么（以及它不是什么）。
JSON是JavaScript Object Notation的缩写。它是一种独立于语言、基于文本的格式，通常用于在网络应用中传输数据。JSON的灵感来自于JavaScript Object Literal符号，但两者之间存在着差异。例如，在JSON中，键必须使用双引号，而在对象字面符号中则不是这样的。
有两种方法可以将数据存储在JSON中。
- 名称/值对的集合(又称JSON对象)
- 一个有序的值列表（又称JSON数组）。
当从网络服务器接收数据时，数据总是一个字符串，这意味着你的工作是把它转换成你可以使用的数据结构。
如果你想了解更多关于JSON的工作原理，请访问JSON网站。
从远程API获取JSON
在下面的例子中，我们将使用神奇的icanhazdadjoke API。正如你可以在它的文档中读到的，发出一个GET请求，其中Accept 头被设置为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 对象。
继续阅读Quick Tip: How to Loop Through a JSON Response in JavaScriptonSitePoint.
