解析和处理嵌套JSON数组：提取机构名称的有效方法-js教程-PHP中文网

解析和处理嵌套JSON数组：提取机构名称的有效方法

碧海醫心

发布： 2025-08-04 13:52:20

原创

991人浏览过

解析和处理嵌套json数组：提取机构名称的有效方法

本文档旨在指导开发者如何从嵌套的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();

登录后复制

代码解释：

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

查看详情

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() 方法中使用更复杂的函数。