前端js重组树形结构数据方法封装
不知道大家平时工作中,有没有遇到这样一种情况:后端接口返回的数据,全都是一维的数组,都是平铺直叙式的数据,业务需求却要你实现树形结构的功能。那么,针对这种情况该怎么办呢?是跟后台好好沟通一下呢,还是沟通一下呢 :)
下面我将封装一种重组树形结构数据的方法,希望能够给大家带来一点帮助!
1 /**
2 *
3 * @param {Array} data
4 * @param {string} pid 子树找父级的标识,这里面默认子树的标识为id,如果不为id,就再传一个子树id
5 标识
6 * @param {string} child 自定义子树字段名称
7 * @returns
8 */
9 export function makeTree(data,pid,child){
10 let parents = data.filter(p => p[pid] === 0),
11 children = data.filter(c => c[pid] !== 0);
12 dataToTree(parents, children);
13 return parents;
14
15 function dataToTree(parents, children){
16 parents.map(p => {
17 children.map((c, i) => {
18 if(c[pid] === p.id){
19 let _children = JSON.parse(JSON.stringify(children));
20 _children.splice(i, 1);
21 dataToTree([c], _children);
22 if(p[child]){
23 p[child].push(c);
24 }else{
25 p[child] = [c];
26 }
27 }
28 })
29 })
30 }
31 }
效果:

输出:

以上就完成对树形结构数据的封装啦!下一篇是对树形结构数据降维的方法封装:https://www.cnblogs.com/coder--wang/p/15042154.html
更多项目中常见的方法封装,传送门:https://github.com/wangruibin666/wang-utils
脚踏实地行,海阔天空飞~
前端js重组树形结构数据方法封装的更多相关文章
- iOS OC和JS的交互 javaScriptCore方法封装
一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...
- js浮点数保留位数方法封装
大家在平时业务中应该经常跟小数打交道吧,有没有被小数点的保留位数问题搞得头疼啊.比如,保留一位小数,保留俩位小数,保留三位小数,向上取整.四舍五入等等. 而我最近在项目中正好遇到类似的问题:有的地方要 ...
- js 检查登录态方法封装(闭包、状态缓存)
前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js. (function(){ //登录状态 1 登录态有效 2 登录态无效 3 请 ...
- js返回树形结构数据
/** * 树形结构转换 * @param a * @param idStr * @param pidStr * @param chindrenStr * @returns {Array} */ fu ...
- 封装getByClass(JS获取class的方法封装为一个函数)
获取方法一(普通版) 获取单一的class: function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class var aEl ...
- 常用js方法封装
常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...
- js引用类型深拷贝、浅拷贝方法封装
引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...
- 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...
随机推荐
- 4D毫米波雷达Radar
4D毫米波雷达Radar 围绕雷达.激光雷达.高精定位等新一代传感器技术将会进入量产周期. 自动驾驶公司的竞争,在传感器配置上坦白说并没有太多差异化.除了车载激光雷达属于近几年的产物,类似摄像头.毫米 ...
- 『动善时』JMeter基础 — 39、JMeter中如果(If)控制器详解
目录 1.什么是逻辑控制器 2.如果控制器介绍 3.如果控制器的使用 (1)测试计划内包含的元件 (2)如果控制器界面内容 (3)HTTP请求界面内容 (4)运行结果 4.如果控制器中表达式的写法 ( ...
- Git操作_本地仓库第一次推送到远程仓库
实现目的: 本地已经安装好Git,pycham已经有一个项目,打算放到Git远程仓库 前提条件:本地配置好了公钥,且GIT 上关联好公钥,步骤如下: git本地仓库连接github操作步骤:windo ...
- RobotFramework常用断言关键字
变量或者关键字内容判断关键字 1.内容包含或者不包含:should contain . should not contain 与should contain x times *** Test Case ...
- frp实现NAS外网访问
开始 入手了NAS之后就看是漫漫的折腾内网穿透的不归路.用的最多最简单的是下面三种 QC:群晖自带的,速度在100kb左右,能不能连上有时候都是运气,极其不稳定. DDNS:最推荐的方式.上下行都取决 ...
- 终于明白为什么要加 final 关键字了
在开发过程中,由于习惯的原因,我们可能对某种编程语言的一些特性习以为常,特别是只用一种语言作为日常开发的情况.但是当你使用超过一种语言进行开发的时候就会发现,虽然都是高级语言,但是它们之间很多特性都是 ...
- 【题解】Luogu P2327 [SCOI2005]扫雷
Luogu P2327 [SCOI2005]扫雷 Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,"余" ...
- WEB安全漏洞扫描与处理(上)——安全漏洞扫描工具AppScan的安装使用
很多公司对软件会有安全的要求,一般测试公司会使用安全漏洞扫描工具对软件进行漏扫,然后给出安全报告,然后软件开发人员会根据提供的安全报告进行漏洞的处理.我们接触到的测评公司,使用的是漏洞扫描工具AppS ...
- 为什么PMOS比NMOS的沟道导通电阻大,速度慢,价格高-透彻详解
原文地址点击这里: 在前一节,我们对PMOS与NMOS两种增强型场效应管的开关电路作了详细的介绍, 并且还提到过一种广为流传的说法:相对于NMOS管,PMOS管的沟道导通电阻更大.速度更慢.成本更高等 ...
- .NET Core/.NET5/.NET6 开源项目汇总9:客户端跨平台UI框架
系列目录 [已更新最新开发文章,点击查看详细] .NET Core 实现了跨平台,支持在 Windwos.Linux.macOS上开发与部署,但是也仅限于Web应用程序.对于Windows桌面 ...