ts实现合并数组对象中key相同的数据

背景

在平常的业务中,后端同学会返回以下类似的结构数据

// 后端返回的数据结构
[{ id: 1, product_id: 1, pid_name: "Asia", name: "HKG01" },{ id: 2, product_id: 1, pid_name: "Asia", name: "SH01" },{ id: 3, product_id: 2, pid_name: "Europe", name: "NY04" },{ id: 4, product_id: 2, pid_name: "Europe", name: "HK02" },{ id: 5, product_id: 2, pid_name: "Europe", name: "HK10" },{ id: 6, product_id: 1, pid_name: "Asia", name: "HKG05" }
]

前端展示时需要归类展示 ,因此需要构造 类似[{parent: "xx", child: [{xx},{xx}]}] 这样的数据

// 前端处理后的结构
[{ parent: "Asia",child: [{ id: 1, product_id: 1, pid_name: "Asia", name: "HKG01" },{ id: 2, product_id: 1, pid_name: "Asia", name: "SH01" },{ id: 5, product_id: 1, pid_name: "Asia", name: "HKG05" }]} ,{ parent: "Europe", child: [{ id: 3, product_id: 2, pid_name: "Europe", name: "NY04" },{ id: 4, product_id: 2, pid_name: "Europe", name: "HK02" },{ id: 4, product_id: 2, pid_name: "Europe", name: "HK10" }]} 
]

合并数组对象中key相同的数据

构造 [ { parent: "xx", child: [ { xx }, { xx } ] } ] ,需要传入数据源,匹配合并的键

type MergeByKeyParam<T> = {dataSource: Array<T>; // 数据源key: string; // 匹配的键prop: string; // 匹配的键名
};
type MergeByKeyResult<T> = {parent: string;child: Array<T>;
};
export const mergeByKey = <T>({ dataSource, key, prop }: MergeByKeyParam<T>): Array<MergeByKeyResult<T>> => {const dataObj = {};for (const item of dataSource) {if (!dataObj[item[key]]) {dataObj[item[key]] = {parent: item[prop],child: []};}dataObj[item[key]].child.push(item);}return Object.values(dataObj);
};
const showRegionList = (regionArr: ICoupon.AvailabilityZone[]) => {return mergeByKey<ICoupon.AvailabilityZone>({ dataSource: regionArr, key: "pid", prop: "pid_name" });
};

最终的展示

~~ END ~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/161498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现极坐标图表QPolarChart的角度轴范围是[0,360]时,0度在水平右侧

目录 参考角度轴范围是[0,360]时&#xff0c;0度在水平右侧.h.cpp 参考 Qt数据可视化(QPolarChart雷达图) 默认QPolarChart的范围是[0,360]时&#xff0c;0度在垂直上方 如官方例子QValueAxis角度轴范围是[-100,100] 角度轴范围是[0,360]时&#xff0c;0度在水平右侧 原理&am…

用eclipse搭建简单的JavaWeb环境

在 Eclipse 中搭建 JavaWeb 项目的环境涉及到配置服务器、创建项目、添加库等步骤。以下是基于 Eclipse 的 JavaWeb 项目搭建的简要步骤&#xff1a; 步骤&#xff1a; 1. 安装 Eclipse IDE for Java EE Developers 确保你已经安装了 Eclipse IDE for Java EE Developers 版…

MyBatis-Plus: 简化你的MyBatis应用

MyBatis-Plus: 简化你的MyBatis应用 在Java开发中&#xff0c;MyBatis一直是一个受欢迎的持久层框架&#xff0c;提供了灵活的数据访问方式。然而&#xff0c;MyBatis的使用往往涉及许多样板代码&#xff0c;这在一定程度上增加了开发的复杂性。这里&#xff0c;MyBatis-Plus&…

刷题笔记(第八天)

1. 请补全JavaScript代码&#xff0c;实现一个函数&#xff0c;要求如下&#xff1a; 根据输入的数字范围[start,end]和随机数个数"n"生成随机数生成的随机数存储到数组中&#xff0c;返回该数组返回的数组不能有相同元素 注意&#xff1a; 不需要考虑"n"…

【C++11】auto与decltype关键字使用详解

系列文章目录 C11新特性使用详解-持续更新 文章目录 系列文章目录前言一、auto关键字1.根据变量的初始化表达式来推导变量的类型2.const与引用 二、decltype关键字1.推断表达式的类型2.const与引用 三、总结 前言 auto和decltype是C11引入的俩个重要的新关键字&#xff0c;用…

简单几步,借助Aapose.Cells将 Excel XLS 转换为PPT

数据呈现是商业和学术工作的一个重要方面。通常&#xff0c;您需要将数据从一种格式转换为另一种格式&#xff0c;以创建信息丰富且具有视觉吸引力的演示文稿。当您需要在幻灯片上呈现工作表数据时&#xff0c;需要从 Excel XLS 转换为 PowerPoint 演示文稿。在这篇博文中&…

原理Redis-QuickList

QuickList **问题1&#xff1a;**ZipList虽然节省内存&#xff0c;但申请内存必须是连续空间&#xff0c;如果内存占用较多&#xff0c;申请内存效率很低。怎么办&#xff1f; 为了缓解这个问题&#xff0c;我们必须限制ZipList的长度和entry大小。 **问题2&#xff1a;**但是…

[网鼎杯 2018]Fakebook

[网鼎杯 2018]Fakebook 打开环境出现一个登录注册的页面 在登录和注册中发现 了地址栏出现变化&#xff0c;扫一波看看 看看robots.txt和flag.php 访问robots.txt看看 再访问user.php.bak <?php class UserInfo { public $name ""; public …

Head、Neck、Backbone介绍

在深度学习中&#xff0c;通常将模型分为三个部分&#xff1a;backbone、neck 和 head。 Backbone&#xff1a;backbone 是模型的主要组成部分&#xff0c;通常是一个卷积神经网络&#xff08;CNN&#xff09;或残差神经网络&#xff08;ResNet&#xff09;等。backbone 负责…

ON1 Photo RAW 2024 for Mac——专业照片编辑的终极利器

ON1 Photo RAW 2024 for Mac是一款专为Mac用户打造的照片编辑器&#xff0c;以其强大的功能和易用的操作&#xff0c;让你的照片编辑工作变得轻松愉快。 一、强大的RAW处理能力 ON1 Photo RAW 2024支持大量的RAW格式照片&#xff0c;能够让你在编辑过程中获得更多的自由度和更…

练习九-利用状态机实现比较复杂的接口设计

练习九-利用状态机实现比较复杂的接口设计 1&#xff0c;任务目的&#xff1a;2&#xff0c;RTL代码3&#xff0c;RTL原理框图4&#xff0c;测试代码5&#xff0c;波形输出 1&#xff0c;任务目的&#xff1a; &#xff08;1&#xff09;学习运用状态机控制的逻辑开关&#xff…

【C++11】=default与=delete关键字使用详解

系列文章目录 C11新特性使用详解-持续更新 文章目录 系列文章目录一、default关键字1. 为什么要引入default关键字2. 注意事项3. 使用default关键字有什么好处4.实例代码 二、delete关键字1. 为什么要引入delete关键字2. 注意事项3. 使用场景3.1删除默认构造函数3.2 删除拷贝构…

2023.11.22 -数据仓库的概念和发展

目录 https://blog.csdn.net/m0_49956154/article/details/134320307?spm1001.2014.3001.5501 1经典传统数仓架构 2离线大数据数仓架构 3数据仓库三层 数据运营层,源数据层&#xff08;ODS&#xff09;&#xff08;Operational Data Store&#xff09; 数据仓库层&#…

开发上门送桶装水小程序要考虑哪些业务场景

上门送水业务已经有很长一段时间了&#xff0c;但是最开始都是给用户发名片、贴小广告&#xff0c;然后客户电话订水&#xff0c;水站工作人员再上门去送&#xff0c;这种人工记单和派单效率并不高&#xff0c;并且电话沟通中也比较容易出现偏差&#xff0c;那么根据这个情况就…

IT 领域中的主要自动化趋势

48%的IT自动化流程属于IT服务管理&#xff0c;过去一年中&#xff0c;IT运维自动化增长了272%。 IT部门从交付者转变为战略伙伴 今年的《工作自动化指数》数据显示&#xff0c;自动化正在蔓延到组织的各个部门&#xff0c;越来越多的部门采用自动化&#xff0c;并且IT以外的员工…

一条命令彻底卸载Linux自带多个版本jdk

一条命令彻底卸载Linux自带多个版本jdk 检查系统已经安装的jdk rpm -qa | grep java卸载所有已经安装的 jdk xargs 将参数逐个传递 将已安装的 java 程序逐个当做参数传递给 rpm -e --nodeps rpm -qa | grep java | xargs rpm -e --nodeps再次检查系统已经安装的jdk rpm -qa | …

JS实现二分查找

最近在面试的时候被问到手写实现二分查找&#xff0c;虽然二分查找很早就听过&#xff0c;也知道实现原理&#xff0c;但是手撸起来&#xff0c;总是差点意思&#xff0c;正好复习一下。作为前端程序员&#xff0c;可能面试绝大部分公司不需要能写很复杂的算法问题&#xff0c;…

Azure Machine Learning - 搜索中的语义排名

目录 什么是语义排名&#xff1f;语义排名的工作原理如何收集和总结输入语义排名的输出如何对摘要进行评分 语义功能和限制 在 Azure AI 搜索中&#xff0c;“语义排名”通过使用语言理解对搜索结果重新排名来显著提高搜索相关性&#xff0c; 本文概括性地介绍了语义排名工作原…

Nodejs JavaScript 字符串加密

情景 问题的场景是这样的&#xff1a;我们需要在浏览器cookie中存储用户名&#xff0c;但又不想直接明文存储&#xff0c;所以对它进行了简单的加密存储。 因为是简单的加密&#xff0c;目的只是不希望明文存储。我们使用了Base64 编码&#xff0c;使得cookie里的存储不可只读…

Arthas 监听 Docker 部署的java项目CPU占比高的信息

1、Linux上安装Arthas wget https://alibaba.github.io/arthas/arthas-boot.jar2、docker ps 查看目标项目的容器ID 3、copy Arthas 到目标容器中 (注意有 &#x1f615; ) docker cp arthas-boot.jar d97e8666666:/4、进入到目标容器目录中 docker exec -it d97e8666666 /b…