在 Angular 中基于特定条件获取唯一 ID

本文介绍了在 Angular 应用中，如何根据 JSON 数据中嵌套对象的特定条件筛选出唯一的 ID 值。通过使用 filter 和 map 方法，可以有效地从数据集中提取所需的信息，并确保结果的唯一性。本文将提供详细的代码示例和步骤，帮助你理解和应用这些技术。

数据准备

首先，我们需要准备包含数据的 JSON 数组。以下是一个示例数据结构，其中包含 id、fname、lname 和 personaldata 字段。personaldata 字段本身也是一个对象，包含 bloodgroup、country 和 email 字段。

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":14,
    "fname":"Tes4",
    "lname":"Testname4",
    "personaldata":{
        "bloodgroup":"A",
        "country":"IN",
        "email":"[email protected]"
    }
}];

数据筛选

接下来，我们将使用 filter 方法根据 bloodgroup 和 country 的值筛选数据。以下代码筛选出 bloodgroup 为 "A" 且 country 为 "IN" 的数据项。

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

提取 ID

使用 map 方法从筛选后的数据中提取 id 字段。

萝卜简历

免费在线AI简历制作工具，帮助求职者轻松完成简历制作。

下载

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

去重

为了确保 id 的唯一性，可以使用 filter 方法进行去重。

const distinctIds = ids.filter((n, i) => ids.indexOf(n) === i);

完整代码示例

以下是完整的 Angular 代码示例，它结合了筛选、提取和去重步骤。

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":14,
    "fname":"Tes4",
    "lname":"Testname4",
    "personaldata":{
        "bloodgroup":"A",
        "country":"IN",
        "email":"[email protected]"
    }
}];

const distinctIds = data
  .filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN')
  .map(d => d.id)
  .filter((n, i) => ids.indexOf(n) === i);

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

注意事项

• 确保 JSON 数据的结构与代码中的访问路径一致，否则可能导致错误。
• indexOf 方法在大型数据集上的性能可能不高，如果处理大量数据，可以考虑使用 Set 数据结构进行去重，以提高性能。
• 可以根据实际需求调整筛选条件，例如增加或修改 bloodgroup 和 country 的值。

总结

本文介绍了在 Angular 中基于特定条件获取唯一 ID 的方法。通过使用 filter 和 map 方法，可以灵活地从 JSON 数据中提取所需的信息，并确保结果的唯一性。希望本文能帮助你更好地处理 Angular 应用中的数据筛选和处理任务。