不知道大家平时工作中,有没有遇到这样一种情况:后端接口返回的数据,全都是一维的数组,都是平铺直叙式的数据,业务需求却要你实现树形结构的功能。那么,针对这种情况该怎么办呢?是跟后台好好沟通一下呢,还是沟通一下呢 :)

  下面我将封装一种重组树形结构数据的方法,希望能够给大家带来一点帮助!

 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重组树形结构数据方法封装的更多相关文章

  1. iOS OC和JS的交互 javaScriptCore方法封装

    一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...

  2. js浮点数保留位数方法封装

    大家在平时业务中应该经常跟小数打交道吧,有没有被小数点的保留位数问题搞得头疼啊.比如,保留一位小数,保留俩位小数,保留三位小数,向上取整.四舍五入等等. 而我最近在项目中正好遇到类似的问题:有的地方要 ...

  3. js 检查登录态方法封装(闭包、状态缓存)

    前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js. (function(){ //登录状态 1 登录态有效 2 登录态无效 3 请 ...

  4. js返回树形结构数据

    /** * 树形结构转换 * @param a * @param idStr * @param pidStr * @param chindrenStr * @returns {Array} */ fu ...

  5. 封装getByClass(JS获取class的方法封装为一个函数)

    获取方法一(普通版) 获取单一的class: function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class var aEl ...

  6. 常用js方法封装

    常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...

  7. js引用类型深拷贝、浅拷贝方法封装

    引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...

  8. 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  9. 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

随机推荐

  1. 如何在框架外部自定义C++ OP

    如何在框架外部自定义C++ OP 通常,如果PaddlePaddle的Operator(OP)库中没有所需要的操作,建议先尝试使用已有的OP组合,如果无法组合出您需要的操作,可以尝试使用paddle. ...

  2. SLAM架构的两篇顶会论文解析

    SLAM架构的两篇顶会论文解析 一. 基于superpoint的词袋和图验证的鲁棒闭环检测 标题:Robust Loop Closure Detection Based on Bag of Super ...

  3. H265与ffmpeg改进开发

    H265与ffmpeg改进开发 1. Introduction KSC265是集编码.解码于一体的H.265编解码软件,完全遵循H.265协议标准.符合H.265编码规范的视频都可以通过KSC265进 ...

  4. 【模板】关于vector的lower_bound和upper_bound以及vector基本用法 STL

    关于lower_bound和upper_bound 共同点 函数组成: 一个数组元素的地址(或者数组名来表示这个数组的首地址,用来表示这个数组的开头比较的元素的地址,不一定要是首地址,只是用于比较的& ...

  5. Huawei USG6530防火墙

    CF卡:(Compact Flash)最初是一种用于便携式电子设备的数据存储设备.作为一种存储设备,它革命性的使用了闪存 与sd卡的区别:SD卡的优点是安全.体积小巧,价格较之CF卡相对比较低,适合用 ...

  6. 机器人路径规划其二 A-Star Algorithm【附动态图源码】

    首先要说明的是,机器人路径规划与轨迹规划属于两个不同的概念,一般而言,轨迹规划针对的对象为机器人末端坐标系或者某个关节的位置速度加速度在时域的规划,常用的方法为多项式样条插值,梯形轨迹等等,而路径规划 ...

  7. Kubernetes之无头服务(headless)

    己经看到如何使用服务来提供稳定的ip地址,从而允许客户端连接到支持服务的每个pod (或其他端点).到服务的每个连接都被转发到一个随机选择的pod上.但是如果客户端需要链接到所有的pod呢?如果后端的 ...

  8. 『无为则无心』Python序列 — 20、Python元组的介绍与使用

    目录 1.元组的应用场景 2.定义元组 3.元组的常见操作 @1.按下标查找数据 @2.index()方法 @3.count()方法 @4.len()方法 4.元祖中的列表元素 5.扩展:序列封包和序 ...

  9. 三剑客-awk

    1.作用特点 排除信息 查询信息 统计信息 替换信息 2.语法格式 awk [参数] '模式-动作' 文件 3.awk命令执行原理 4.命令使用方法 创建测试环境 [root@shuai ~]# ca ...

  10. (数据科学学习手札124)pandas 1.3版本主要更新内容一览

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 就在几天前,pandas发布了其1.3版本 ...