使用 Angular 从 JSON 数据中提取满足特定条件的唯一 ID-js教程-PHP中文网

使用 Angular 从 JSON 数据中提取满足特定条件的唯一 ID

碧海醫心

发布： 2025-08-24 23:08:37

原创

599人浏览过

使用 angular 从 json 数据中提取满足特定条件的唯一 id

本文档介绍了如何在 Angular 应用中，从 JSON 数据集中根据指定条件（例如，bloodgroup 为 "A" 且 country 为 "IN"）筛选出唯一的 id 值。我们将使用 Angular 的 filter 和 map 方法来实现这一目标，并提供完整的代码示例。

从 JSON 数据中提取满足条件的唯一 ID

在 Angular 应用中处理 JSON 数据时，经常需要根据特定条件筛选数据，并提取所需的信息。以下步骤展示了如何从 JSON 数据中提取满足特定条件的唯一 id 值。

1. 数据准备

首先，假设我们有以下 JSON 数据：

const data =  [
  {
    "id": 1,
    "fname": "Tes1",
    "lname": "Testname1",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "[email protected]"
    }
  },
  {
    "id": 12,
    "fname": "Tes2",
    "lname": "Testname2",
    "personaldata": {
      "bloodgroup": "B",
      "country": "US",
      "email": "[email protected]"
    }
  },
  {
    "id": 13,
    "fname": "Tes3",
    "lname": "Testname3",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "[email protected]"
    }
  },
  {
    "id": 1,
    "fname": "Tes4",
    "lname": "Testname4",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "[email protected]"
    }
  }
];

登录后复制

2. 使用 filter 方法筛选数据

使用 filter 方法根据条件筛选数据。例如，要筛选出 bloodgroup 为 "A" 且 country 为 "IN" 的数据，可以使用以下代码：

const filteredData = data.filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === "IN");

登录后复制

3. 使用 map 方法提取 id 值

使用 map 方法从筛选后的数据中提取 id 值：

百度文心一格

百度推出的AI绘画作图工具

112

查看详情

const ids = filteredData.map(d => d.id);

登录后复制

4. 移除重复的 id 值

可以使用 filter 方法结合 indexOf 方法来移除重复的 id 值。然而，由于filter方法会返回一个新的数组，直接使用indexOf方法可能会导致错误的结果，因为它是在原始的data数组中查找元素的索引，而不是在filteredData数组中。更好的方法是使用Set数据结构来保证唯一性。

const uniqueIds = [...new Set(ids)];

登录后复制

5. 完整代码示例

将以上步骤整合到一起，完整的代码示例如下：

const data =  [
  {
    "id": 1,
    "fname": "Tes1",
    "lname": "Testname1",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "[email protected]"
    }
  },
  {
    "id": 12,
    "fname": "Tes2",
    "lname": "Testname2",
    "personaldata": {
      "bloodgroup": "B",
      "country": "US",
      "email": "[email protected]"
    }
  },
  {
    "id": 13,
    "fname": "Tes3",
    "lname": "Testname3",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "[email protected]"
    }
  },
  {
    "id": 1,
    "fname": "Tes4",
    "lname": "Testname4",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "[email protected]"
    }
  }
];

const filteredData = data.filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === "IN");
const ids = filteredData.map(d => d.id);
const uniqueIds = [...new Set(ids)];

console.log(uniqueIds); // 输出: [1, 13]

登录后复制

总结

通过结合使用 filter 和 map 方法，以及 Set 数据结构，可以有效地从 JSON 数据中提取满足特定条件的唯一 id 值。这种方法简洁高效，易于理解和维护，适用于各种 Angular 应用场景。

注意事项