本文档旨在指导开发者如何从嵌套的JSON数组中提取数据，特别是当数组中的对象数量不确定时。我们将通过一个实际案例，展示如何使用JavaScript处理包含机构信息的JSON数据，并提供一种灵活且健壮的解决方案，避免因数组索引越界而导致程序出错。我们将使用map()和join()方法来优雅地处理嵌套数组，提取机构名称并将其连接成字符串。
理解JSON结构
在开始之前，让我们先回顾一下示例JSON数据的结构。该JSON对象包含一个名为 "results" 的数组，该数组中的每个元素都是一个包含多个键值对的对象。其中， "agencies" 键对应的值也是一个数组，包含了多个机构对象，每个机构对象都有 "raw_name" 等属性。
{
"results": [
{
"title": "...",
"type": "...",
"abstract": "...",
"document_number": "...",
"html_url": "...",
"pdf_url": "...",
"publication_date": "...",
"agencies": [
{
"raw_name": "...",
"name": "...",
"id": 12,
"url": "...",
"json_url": "...",
"parent_id": null,
"slug": "..."
},
{
"raw_name": "...",
"name": "...",
"id": 157,
"url": "...",
"json_url": "...",
"parent_id": 12,
"slug": "..."
}
],
"excerpts": "..."
},
{
"title": "...",
"type": "...",
"abstract": "...",
"document_number": "...",
"html_url": "...",
"pdf_url": "...",
"publication_date": "...",
"agencies": [
{
"raw_name": "...",
"name": "...",
"id": 12,
"url": "...",
"json_url": "...",
"parent_id": null,
"slug": "..."
},
{
"raw_name": "...",
"name": "...",
"id": 456,
"url": "...",
"json_url": "...",
"parent_id": 12,
"slug": "..."
}
],
"excerpts": "..."
}
]
}使用 map() 和 join() 方法提取机构名称
关键在于如何处理 "agencies" 数组，并提取每个机构对象的 "raw_name" 属性。一种有效的方法是使用 map() 方法遍历 "agencies" 数组，并将每个机构对象的 "raw_name" 属性提取出来，形成一个新的数组。然后，使用 join() 方法将这个新的数组连接成一个字符串，用逗号分隔。
以下是修改后的JavaScript代码：
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
let text = "";
for (let i in myArr.results) {
// 使用 map() 方法提取 raw_name 属性，并使用 join() 方法连接成字符串
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();代码解释：
myArr.results[i].agencies.map(a => a.raw_name): 这部分代码使用 map() 方法遍历 myArr.results[i].agencies 数组。对于数组中的每个元素（这里是每个机构对象），map() 方法都会调用提供的函数 a => a.raw_name。这个函数接收一个机构对象 a 作为参数，并返回该对象的 raw_name 属性值。最终，map() 方法会返回一个新的数组，其中包含了所有机构的 raw_name 属性值。
.join(', '): 这部分代码使用 join() 方法将上一步生成的数组连接成一个字符串。join() 方法接收一个分隔符作为参数，这里我们使用 ,（逗号和一个空格）作为分隔符。join() 方法会将数组中的所有元素连接成一个字符串，并使用指定的分隔符将它们分隔开。
优点
- 简洁性： 使用 map() 和 join() 方法可以简化代码，使其更易于阅读和维护。
- 健壮性： 该方法可以处理 "agencies" 数组中包含任意数量的机构对象的情况，避免了因数组索引越界而导致程序出错。
- 灵活性： 可以轻松地修改分隔符，以满足不同的需求。
注意事项
- 确保 "agencies" 数组中的每个对象都包含 "raw_name" 属性。如果某个对象缺少该属性，map() 方法可能会返回 undefined，导致最终的字符串中出现 "undefined"。可以通过添加条件判断来避免这种情况。
- 如果需要更复杂的处理逻辑，例如根据某些条件过滤机构对象，可以在 map() 方法中使用更复杂的函数。
总结
通过使用 map() 和 join() 方法，我们可以有效地从嵌套的JSON数组中提取数据，并将其转换为易于使用的格式。这种方法不仅简洁、健壮，而且具有很高的灵活性，可以满足各种不同的需求。在处理类似的数据结构时，可以考虑使用这种方法来提高代码的效率和可维护性。
