前端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 ...
随机推荐
- Hashing散列注意事项
Hashing散列注意事项 Numba支持内置功能hash(),只需__hash__()在提供的参数上调用成员函数即可 .这使得添加对新类型的哈希支持变得微不足道,这是因为扩展APIoverload_ ...
- 重新整理 .net core 实践篇—————日志系统之作用域[十七]
前言 前面介绍了服务与日志之间的配置,那么我们服务会遇到下面的场景会被遇到一些打log的问题. 前面我提及到我们的log,其实是在一个队列里面,而我们的请求是在并发的,多个用户同时发送请求这个时候我们 ...
- 三、使用sudo分配管理权限
使用sudo分配管理权限 su命令 su - [账户名称] :切换到用户,不加用户名默认切换到root su - [账户名称] -c '命令' :以xx用户身份执行命令,注意命令需 ...
- 【NX二次开发】Block UI 树列表
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- 如何下载安装Python
github博客传送门 csdn博客传送门 如何下载安装python 第一步: 在python的官网下载python版本,需要下载对应版本(在计算机-属性中查看自己是32位操作系统还是64位操作系统 ...
- 「10.19」最长不下降子序列(DP)·完全背包问题(spfa优化DP)·最近公共祖先(线段树+DFS序)
我又被虐了... A. 最长不下降子序列 考场打的错解,成功调了两个半小时还是没A, 事实上和正解的思路很近了,只是没有想到直接将前$D$个及后$D$个直接提出来 确实当时思路有些紊乱,打的时候只是将 ...
- 裸辞闭关2个月,成功进大厂!吃透这份562页《算法知识手册》,化身offer收割机!
前言 记得我上本科的时候,我们老师一直跟我们强调:"算法才是编程的灵魂,一定要把算法学好."因为不管你是Java编程爱好者.还是python的忠实粉丝,亦或觉得PHP才是这个世界最 ...
- C#winform的Richtextbox控件实现自动滚动到最后一行功能
这里有两种情况 如果是采用的是richtextbox的AppendText的方法添加的内容,则只需 设置HideSelection为false 如果采用的是其他添加内容的方法,则需要添加TextCha ...
- springboot bean的循环依赖实现 源码分析
springboot bean的循环依赖实现 源码分析 本文基于springboot版本2.5.1 <parent> <groupId>org.springframework. ...
- 散列数据结构以及在HashMap中的应用
1. 为什么需要散列表? 对于线性表和链表而言,访问表中的元素,时间复杂度均为O(n).即便是通过树结构存储数据,时间复杂度也为O(logn).那么有没有一种方式可以将这个时间复杂度降为O(1)呢?当 ...