本文档旨在指导开发者如何使用JavaScript解析和处理包含嵌套数组的JSON数据。我们将通过一个实际案例，演示如何从嵌套的“agencies”数组中提取“raw_name”值，并将其展示在网页上。通过学习本文，你将掌握处理复杂JSON结构的技巧，并能灵活地应用于各种数据处理场景。
理解JSON结构
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。一个JSON对象可以包含键值对，其中值可以是基本数据类型（如字符串、数字、布尔值），也可以是另一个JSON对象或数组。
在处理嵌套JSON时，需要理解其层级结构，以便正确地访问和提取所需的数据。例如，以下JSON结构包含一个名为 "results" 的数组，该数组中的每个元素都是一个包含 "agencies" 数组的对象：
{
"results": [
{
"title": "Example Title 1",
"agencies": [
{
"raw_name": "Agency A"
},
{
"raw_name": "Agency B"
}
]
},
{
"title": "Example Title 2",
"agencies": [
{
"raw_name": "Agency C"
}
]
}
]
}使用JavaScript解析JSON
JavaScript提供了 JSON.parse() 方法，可以将JSON字符串转换为JavaScript对象。一旦JSON数据被解析为JavaScript对象，就可以使用点号 . 或方括号 [] 访问其属性。
立即学习“Java免费学习笔记（深入）”；
以下代码展示了如何使用 XMLHttpRequest 获取JSON数据，并将其解析为JavaScript对象：
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
// 在这里处理解析后的JSON数据
};
xmlhttp.open(
"GET",
"https://www.federalregister.gov/api/v1/documents.json?conditions[agencies][]=agriculture-department&conditions[agencies][]=federal-highway-administration&conditions[agencies][]=fish-and-wildlife-service&conditions[agencies][]=forest-service&conditions[agencies][]=interior-department&conditions[agencies][]=international-boundary-and-water-commission-united-states-and-mexico&conditions[agencies][]=land-management-bureau&conditions[agencies][]=national-highway-traffic-safety-administration&conditions[agencies][]=national-park-service&conditions[agencies][]=reclamation-bureau&conditions[agencies][]=environmental-protection-agency&conditions[agencies][]=council-on-environmental-quality&conditions[agencies][]=safety-and-environmental-enforcement-bureau&conditions[agencies][]=environment-office-energy-department&conditions[comment_date][gte]=05%2F01%2F2023&conditions[comment_date][lte]=01%2F01%2F2050&conditions[term]=arizona&conditions[type][]=RULE&conditions[type][]=PRORULE&conditions[type][]=NOTICE",
true
);
xmlhttp.send();遍历嵌套数组并提取数据
要从嵌套的 "agencies" 数组中提取 "raw_name" 值，可以使用嵌套循环或 map() 方法。
使用 map() 和 join()
map() 方法可以遍历数组中的每个元素，并返回一个新的数组，其中包含对每个元素应用函数后的结果。join() 方法可以将数组中的所有元素连接成一个字符串，并使用指定的分隔符分隔它们。
以下代码展示了如何使用 map() 和 join() 方法提取 "raw_name" 值，并将它们连接成一个字符串：
for (let i in myArr.results) {
let agencies = myArr.results[i].agencies.map(a => a.raw_name).join(', ');
text += "<div class='fed-reg-container'><h2 class='title'>" + myArr.results[i].title + "</h2><p>" + myArr.results[i].type + "</p><p>" + agencies + " Document # " + myArr.results[i].document_number + "</p><p>Posted on: " + myArr.results[i].publication_date + "</p><p>" + myArr.results[i].abstract + "</p><a class='fed-reg-button' href='" + myArr.results[i].html_url + "'>Read More</a></div>";
}这段代码首先遍历 myArr.results 数组中的每个元素。对于每个元素，它使用 map(a => a.raw_name) 提取 "agencies" 数组中每个对象的 "raw_name" 值，并将它们存储在一个新的数组中。然后，它使用 join(', ') 将这个新的数组中的所有元素连接成一个字符串，并使用逗号和空格作为分隔符。最后，它将这个字符串添加到 text 变量中。
代码示例
完整的代码示例如下：
<html>
<head>
<style>
.fed-reg-container {
background-color: black;
color: white;
padding: 20px;
margin: 20px 0;
}
.title {
color: #fcb900;
}
.fed-reg-button {
background-color: #fcb900;
color: black;
padding: 10px;
display: block;
max-width: 100px;
text-align: center;
font-weight: 600;
text-decoration: none;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
let text = "";
for (let i in myArr.results) {
let agencies = myArr.results[i].agencies.map(a => a.raw_name).join(', ');
text += "<div class='fed-reg-container'><h2 class='title'>" + myArr.results[i].title + "</h2><p>" + myArr.results[i].type + "</p><p>" + agencies + " Document # " + myArr.results[i].document_number + "</p><p>Posted on: " + myArr.results[i].publication_date + "</p><p>" + myArr.results[i].abstract + "</p><a class='fed-reg-button' href='" + myArr.results[i].html_url + "'>Read More</a></div>";
}
text += "";
document.getElementById("demo").innerHTML = text;
};
xmlhttp.open(
"GET",
"https://www.federalregister.gov/api/v1/documents.json?conditions[agencies][]=agriculture-department&conditions[agencies][]=federal-highway-administration&conditions[agencies][]=fish-and-wildlife-service&conditions[agencies][]=forest-service&conditions[agencies][]=interior-department&conditions[agencies][]=international-boundary-and-water-commission-united-states-and-mexico&conditions[agencies][]=land-management-bureau&conditions[agencies][]=national-highway-traffic-safety-administration&conditions[agencies][]=national-park-service&conditions[agencies][]=reclamation-bureau&conditions[agencies][]=environmental-protection-agency&conditions[agencies][]=council-on-environmental-quality&conditions[agencies][]=safety-and-environmental-enforcement-bureau&conditions[agencies][]=environment-office-energy-department&conditions[comment_date][gte]=05%2F01%2F2023&conditions[comment_date][lte]=01%2F01%2F2050&conditions[term]=arizona&conditions[type][]=RULE&conditions[type][]=PRORULE&conditions[type][]=NOTICE",
true
);
xmlhttp.send();
</script>
</body>
</html>注意事项
- 错误处理： 在访问嵌套属性之前，请确保它们存在。可以使用条件语句或 try...catch 块来处理可能出现的错误。
- 数据类型： 确保JSON数据的类型与预期一致。如果数据类型不正确，可能会导致错误或意外的结果。
- API限制： 在使用第三方API时，请仔细阅读其文档，了解其使用限制和最佳实践。
总结
本文介绍了如何使用JavaScript解析和处理包含嵌套数组的JSON数据。通过使用 JSON.parse() 方法将JSON字符串转换为JavaScript对象，并使用 map() 和 join() 方法提取和格式化所需的数据，可以轻松地处理复杂的JSON结构。在实际开发中，请注意错误处理和数据类型，并根据API的限制进行调整。 掌握这些技巧，将使你能够更有效地处理各种数据处理场景。
