本文将指导您如何从包含数组的对象中提取数据，并将其应用于实际场景，例如动态生成 HTML 内容。我们将通过示例代码和详细解释，展示如何处理嵌套的数组数据，并将其有效地展示在网页上。

在实际开发中，我们经常会遇到从 API 接口获取的数据结构中包含数组的情况。例如，一个用户对象可能包含一个 labels 数组，其中存储了用户的多个标签信息。如果我们需要将这些标签信息展示在网页上，就需要从 labels 数组中提取数据。

以下是一个示例场景，假设我们从 API 接口获取到如下数据结构：

[
  {
    "labels": [
      {
        "id": 123,
        "node_id": "MDExOkxhYmVsMTIz",
        "url": "https://api.github.com/repos/vercel/next.js/labels/bug",
        "name": "bug",
        "color": "d73a4a",
        "default": true,
        "description": "Something isn't working"
      },
      {
        "id": 456,
        "node_id": "MDExOkxhYmVsNDU2",
        "url": "https://api.github.com/repos/vercel/next.js/labels/enhancement",
        "name": "enhancement",
        "color": "a2eeef",
        "default": false,
        "description": "New feature or request"
      }
    ]
  }
]

我们的目标是从 labels 数组中提取 id 和 node_id，并将其展示在 HTML 中。

解决方案

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

我们可以使用 map 方法遍历 labels 数组，并为每个标签生成相应的 HTML 代码。

const test = [
  {
    "labels": [
      {
        "id": 123,
        "node_id": "MDExOkxhYmVsMTIz",
        "url": "https://api.github.com/repos/vercel/next.js/labels/bug",
        "name": "bug",
        "color": "d73a4a",
        "default": true,
        "description": "Something isn't working"
      },
      {
        "id": 456,
        "node_id": "MDExOkxhYmVsNDU2",
        "url": "https://api.github.com/repos/vercel/next.js/labels/enhancement",
        "name": "enhancement",
        "color": "a2eeef",
        "default": false,
        "description": "New feature or request"
      }
    ]
  }
];

const html = test.map((user) => {
  return `
    ${user.labels.map((label) => {
      return `
        <div class="label">
          Labels:<br>
          ID: ${label.id}<br>
          Node ID: ${label.node_id}<br>
        </div>
      `;
    }).join("")}
  `;
}).join("");

console.log(html);

// 将生成的 HTML 插入到页面中
document.querySelector("#app").insertAdjacentHTML("afterbegin", html);

代码解释：

1. test.map((user) => { ... }): 首先，我们使用 map 方法遍历包含用户对象的数组 test。
2. user.labels.map((label) => { ... }): 对于每个用户对象，我们再使用 map 方法遍历其 labels 数组。
3. ``: 在内部的 map 方法中，我们为每个标签生成一个包含 id 和 node_id 的 HTML div 元素。
4. .join(""): map 方法返回的是一个数组，我们需要使用 join("") 方法将其转换为字符串，以便将其插入到 HTML 中。两次 join("") 分别将内部和外部的 map 结果数组转换成字符串。
5. document.querySelector("#app").insertAdjacentHTML("afterbegin", html): 最后，我们使用 insertAdjacentHTML 方法将生成的 HTML 代码插入到 id 为 app 的元素中。

注意事项：

• 确保 API 返回的数据结构与代码中的假设一致，否则可能导致错误。
• 在实际项目中，建议使用更健壮的模板引擎，例如 Handlebars 或 Mustache，以提高代码的可维护性和可读性。
• 注意 HTML 元素的转义，防止 XSS 攻击。

总结：

通过使用 map 方法，我们可以轻松地从包含数组的对象中提取数据，并将其应用于实际场景中。理解和掌握这种方法对于处理复杂的 API 数据和动态生成 HTML 内容至关重要。在实际开发中，可以根据具体需求对代码进行调整和优化，以满足不同的业务场景。