从对象中提取数组数据的实用指南-js教程-PHP中文网

从对象中提取数组数据的实用指南

霞舞

发布： 2025-09-25 17:45:01

原创

201人浏览过

从对象中提取数组数据的实用指南

本文将指导您如何从包含数组的对象中提取数据，并将其应用于实际场景，例如动态生成 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 中。

解决方案

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

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

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);

登录后复制

代码解释：

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