本文将详细介绍如何在 Angular 中，根据给定的 JSON 数据，筛选出满足特定条件的记录，并从中提取唯一的 ID 值。正如摘要所说，我们将使用 filter 和 map 方法来实现这一目标。
数据准备
首先，假设我们有以下 JSON 数据，它代表了一组用户的信息，包含 ID、姓名和个人数据：
const data = [ { "id": 1, "fname": "Tes1", "lname": "Testname1", "personaldata": { "bloodgroup": "A", "country": "IN", "email": "test1@example.com" } }, { "id": 12, "fname": "Tes2", "lname": "Testname2", "personaldata": { "bloodgroup": "B", "country": "US", "email": "test2@example.com" } }, { "id": 13, "fname": "Tes3", "lname": "Testname3", "personaldata": { "bloodgroup": "A", "country": "IN", "email": "test3@example.com" } }, { "id": 1, "fname": "Tes4", "lname": "Testname4", "personaldata": { "bloodgroup": "A", "country": "IN", "email": "test4@example.com" } }];
我们的目标是：筛选出 bloodgroup 为 “A” 且 country 为 “IN” 的记录，并提取这些记录的唯一 id 值。
过滤数据
第一步是使用 filter 方法，根据 bloodgroup 和 country 条件筛选数据：
const filteredData = data.filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN');
这段代码会返回一个新的数组，其中只包含 bloodgroup 为 “A” 且 country 为 “IN” 的对象。
去除重复项
由于原始数据中可能存在重复的 ID，我们需要去除重复项。可以使用 filter 方法结合 indexOf 方法实现去重：
const distinctData = filteredData.filter((n, i) => filteredData.indexOf(n) === i);
这段代码会遍历 filteredData 数组，并保留第一次出现的元素，从而去除重复项。
v0.dev
Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码
261 查看详情
提取 ID
最后，使用 map 方法提取每个对象的 id 值：
const distinctIds = distinctData.map(d => d.id);
这段代码会将 distinctData 数组转换为一个只包含 id 值的数组。
完整代码示例
将以上步骤组合起来，得到完整的代码如下：
const data = [ { "id": 1, "fname": "Tes1", "lname": "Testname1", "personaldata": { "bloodgroup": "A", "country": "IN", "email": "test1@example.com" } }, { "id": 12, "fname": "Tes2", "lname": "Testname2", "personaldata": { "bloodgroup": "B", "country": "US", "email": "test2@example.com" } }, { "id": 13, "fname": "Tes3", "lname": "Testname3", "personaldata": { "bloodgroup": "A", "country": "IN", "email": "test3@example.com" } }, { "id": 1, "fname": "Tes4", "lname": "Testname4", "personaldata": { "bloodgroup": "A", "country": "IN", "email": "test4@example.com" } }];const distinctIds = data .filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN') .filter((n, i) => data.indexOf(n) === i) .map(d => d.id);console.log(distinctIds); // 输出: [1, 13]
注意事项
确保数据结构与代码中的访问方式一致，例如 d.personaldata.bloodgroup 和 d.personaldata.country。
indexOf 方法在大型数据集上的性能可能不高，可以考虑使用 Set 数据结构进行去重，以提高性能。例如：
const distinctIds = [...new Set(data .filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN') .map(d => d.id))];
总结
本文介绍了在 Angular 中，如何使用 filter 和 map 方法，从 JSON 数据集中筛选出满足特定条件的记录，并提取其中唯一的 ID 值。通过合理地组合这些方法，可以高效地处理数据，并得到所需的结果。同时，需要注意数据结构和性能优化，以确保代码的正确性和效率。
以上就是Angular 中基于特定条件获取唯一 ID 的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/747612.html
微信扫一扫 
支付宝扫一扫 
