本文档旨在指导开发者如何从嵌套的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%5Bagencies%5D%5B%5D=agriculture-department&conditions%5Bagencies%5D%5B%5D=federal-highway-administration&conditions%5Bagencies%5D%5B%5D=fish-and-wildlife-service&conditions%5Bagencies%5D%5B%5D=forest-service&conditions%5Bagencies%5D%5B%5D=interior-department&conditions%5Bagencies%5D%5B%5D=international-boundary-and-water-commission-united-states-and-mexico&conditions%5Bagencies%5D%5B%5D=land-management-bureau&conditions%5Bagencies%5D%5B%5D=national-highway-traffic-safety-administration&conditions%5Bagencies%5D%5B%5D=national-park-service&conditions%5Bagencies%5D%5B%5D=reclamation-bureau&conditions%5Bagencies%5D%5B%5D=environmental-protection-agency&conditions%5Bagencies%5D%5B%5D=council-on-environmental-quality&conditions%5Bagencies%5D%5B%5D=safety-and-environmental-enforcement-bureau&conditions%5Bagencies%5D%5B%5D=environment-office-energy-department&conditions%5Bcomment_date%5D%5Bgte%5D=05%2F01%2F2023&conditions%5Bcomment_date%5D%5Blte%5D=01%2F01%2F2050&conditions%5Bterm%5D=arizona&conditions%5Btype%5D%5B%5D=RULE&conditions%5Btype%5D%5B%5D=PRORULE&conditions%5Btype%5D%5B%5D=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数组中提取数据，并将其转换为易于使用的格式。这种方法不仅简洁、健壮，而且具有很高的灵活性，可以满足各种不同的需求。在处理类似的数据结构时，可以考虑使用这种方法来提高代码的效率和可维护性。
