Angular 中基于特定条件获取唯一 ID 的方法

angular 中基于特定条件获取唯一 id 的方法

本文将详细介绍如何在 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 数组,并保留第一次出现的元素,从而去除重复项。

提取 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/1517702.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 10:57:05
下一篇 2025年12月20日 10:57:17

相关推荐

  • 在 React useEffect 中高效管理多个异步请求并更新状态

    本文探讨了在 React useEffect 中处理多个并行异步请求时的常见陷阱与最佳实践。重点介绍了如何利用 Promise.all 有效聚合异步操作结果,避免在循环中频繁更新状态,从而确保数据完整性、优化渲染性能,并在所有数据加载完成后正确管理加载状态。 引言 在 react 应用中,useef…

    2025年12月20日
    000
  • 在React useEffect 中高效管理并发异步操作与状态更新

    本教程深入探讨了在React useEffect 钩子中处理多个并发异步操作的正确方法。通过分析一个常见的错误模式,即在异步循环中频繁更新状态,我们演示了如何利用 Promise.all 聚合所有异步请求的结果,从而实现一次性、原子性地更新组件状态,确保加载状态的准确性,并优化组件的渲染性能。 理解…

    2025年12月20日
    000
  • 在Jest测试中有效管理和传递AWS临时凭证

    本文旨在解决Jest测试框架在执行涉及AWS服务的测试时,无法访问通过awsume等工具加载的AWS临时凭证的问题。核心内容将围绕两种主要解决方案展开:通过设置环境变量直接将临时凭证传递给Jest进程,以及通过创建封装脚本来确保awsume加载的凭证在Jest执行环境中可用。这些方法能有效解决Jes…

    2025年12月20日
    000
  • Jest测试中AWS凭证的有效管理:awsume集成与临时凭证传递实践

    本文旨在解决在使用awsume加载AWS凭证后,Jest测试框架无法自动访问这些凭证的问题,特别是在测试与AWS服务(如DynamoDB)交互的场景。核心解决方案是通过环境变量直接向Jest进程传递临时AWS凭证,确保其能正确认证。此外,文章还探讨了利用包装脚本自动化凭证加载和测试执行的策略,并提供…

    2025年12月20日
    000
  • 在Jest测试中有效管理AWS凭证:awsume与环境变量实践

    本文详细介绍了在Jest测试框架中,尤其是在使用awsume管理AWS临时凭证时,如何解决因Jest插件无法访问终端凭证而导致的认证问题。核心解决方案是通过设置环境变量直接向Jest传递AWS访问密钥和秘密密钥,或采用封装脚本先加载凭证再运行测试,确保测试环境能够正确连接AWS服务如DynamoDB…

    2025年12月20日
    000
  • JavaScript字符串的智能空白符与换行符处理:实现精确的代码压缩

    本教程深入探讨如何在JavaScript字符串中精确控制空白符和换行符的替换。我们将介绍如何使用String.prototype.replace()方法结合回调函数,实现有条件的空白符移除和换行符转换为分号,以达到类似代码压缩的效果,同时避免破坏代码语法。这种方法比简单的全局替换更智能,能有效处理特…

    2025年12月20日
    000
  • JavaScript代码字符串格式化:智能替换空格与换行符的实践

    本文探讨在JavaScript中如何智能地替换代码字符串中的空格和换行符,以实现代码的紧凑化,同时避免破坏语法或可读性。通过一个自定义函数,结合正则表达式和回调函数,实现对换行符的条件性转换为分号,并保留关键字后的必要空格,从而生成一个既紧凑又功能正确的代码字符串。 引言:为何简单的替换不足以应对?…

    2025年12月20日
    000
  • JavaScript代码字符串的精细化处理:智能替换空格、换行与添加分号

    本教程探讨如何在JavaScript中对代码字符串进行智能格式化与压缩。针对移除不必要的空格和换行符,并根据上下文自动插入或保留分号与空格的需求,文章提供了一种基于正则表达式和上下文判断的解决方案。通过示例代码,详细演示了如何实现代码的精细化处理,使其在保持功能完整性的同时,达到更紧凑的输出效果。 …

    2025年12月20日
    000
  • JavaScript代码字符串的智能格式化与自定义压缩:处理空白符和换行符

    本教程探讨如何在JavaScript代码字符串中智能地处理空白符和换行符,以实现自定义的格式化或轻量级压缩。通过结合正则表达式和回调函数,我们将学习如何有选择地移除不必要的空格、将换行符转换为分号,并保留关键字间的必要空格,从而生成更紧凑但功能完整的代码字符串,避免简单全局替换导致的语法错误。 在j…

    2025年12月20日
    000
  • JavaScript代码字符串的智能压缩与格式化

    在JavaScript开发中,有时我们需要对代码的字符串表示进行压缩或格式化,例如在处理函数体字符串时。然而,简单的全局替换空格和换行符会导致代码语义丢失,生成无法执行的代码。本文将详细介绍如何利用正则表达式和回调函数,实现对JavaScript代码字符串的智能压缩,在移除不必要空白的同时,保留关键…

    2025年12月20日
    000
  • 如何在 Chart.js 中定制图表点元素:深入解析与最佳实践

    本教程深入探讨了 Chart.js 中定制图表点元素的两种方法。首先指出直接扩展 PointElement 并注册的常见误区,然后介绍通过全局替换 PointElement 实现定制,并强调其局限性。最后,重点推荐并详细演示了使用 pointStyle 选项配合 Canvas 元素进行精细化自定义绘…

    2025年12月20日
    000
  • Chart.js 中高级点元素自定义教程:超越默认限制

    本教程深入探讨了在 Chart.js 中自定义点元素(Point Element)的两种主要方法。首先,我们分析了直接扩展并注册自定义点元素的常见误区,并提供了一种通过直接替换 Chart.js 内部默认点元素类来实现全局自定义的方案。随后,我们重点介绍并强烈推荐使用 Chart.js 官方支持的 …

    2025年12月20日
    000
  • Chart.js 自定义点元素:扩展与绘制技巧

    本文深入探讨了在 Chart.js 中自定义点元素的两种主要方法。首先,我们将介绍如何通过直接替换默认的 PointElement 类来实现全局自定义,并分析其局限性。随后,重点讲解 Chart.js 官方推荐且更灵活的 pointStyle 配置,该方法允许开发者通过脚本化的 Canvas 绘制功…

    2025年12月20日
    000
  • CSS Grid布局中可折叠内容间距优化教程

    本教程旨在解决在CSS Grid布局中集成可折叠(Collapsible)元素时,因隐藏内容仍占用空间而导致的间距问题。通过优化CSS的display属性和利用相邻兄弟选择器,确保隐藏内容完全不占用布局空间,同时保留平滑的展开动画效果,从而实现紧凑且功能完善的网格布局。 理解问题:可折叠内容与Gri…

    2025年12月20日 好文分享
    000
  • CSS Grid布局中可折叠组件的间距优化与实现

    本教程旨在解决CSS Grid布局中可折叠(collapsible)内容在隐藏时仍占用空间,导致元素间出现不必要间距的问题。通过巧妙结合CSS的display属性、max-height过渡动画以及相邻兄弟选择器,我们将展示如何实现无缝、空间优化的可折叠组件,确保其在展开时平滑显示,在收起时完全不占用…

    2025年12月20日
    000
  • 使用CSS Grid实现可展开按钮的无缝网格布局

    本文旨在解决在使用CSS Grid布局时,可展开按钮(collapsible button)与其内容之间出现间隙的问题。通过修改CSS样式,特别是.content类的display属性,以及利用相邻兄弟选择器,可以实现按钮与其内容在网格中无缝衔接,提升用户体验。本文将提供详细的CSS代码示例,并解释…

    2025年12月20日
    000
  • Chart.js 自定义点元素:两种高级定制方法解析

    本文深入探讨了在 Chart.js 中定制图表点元素的两种主要方法。首先,我们分析了直接继承并注册 PointElement 的局限性,并提供了一种通过全局替换 Chart.elements.PointElement 实现自定义绘制逻辑的高级方案。其次,我们详细介绍了利用 pointStyle 配置…

    2025年12月20日
    000
  • JavaScript字符串截取方法报错:undefined类型错误解决方案

    JavaScript字符串截取方法报错:undefined类型错误解决方案 在Next.js或类似框架中,从后端获取数据并渲染到前端页面是一个常见的操作。但如果数据加载存在延迟,直接对可能为undefined的值进行字符串操作,就会导致TypeError: Cannot read propertie…

    2025年12月20日
    000
  • 使用CSS为动态内容创建圆形背景高亮效果

    本教程详细阐述了如何利用CSS为列表中的动态数字内容创建完美的圆形背景高亮效果。通过结合border-radius: 50%、display: inline-flex以及弹性盒布局的对齐属性,确保圆形外观正确呈现,并使内容在其中完美居中,同时避免常见的HTML结构和CSS属性使用误区。 在网页开发中…

    2025年12月20日
    000
  • CSS实现动态内容圆形高亮与居中显示教程

    本教程详细讲解如何利用CSS为动态内容(如数字)创建完美的圆形背景高亮,并确保内容在圆内水平垂直居中。我们将通过border-radius: 50%定义圆形,并结合display: inline-flex、justify-content: center和align-items: center实现内容…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信