js格式化树形数据(扁平化数据)
需求:
1、把如下数据按照parent_id等于id的规则建立父子关系
2、同一层级的数组按照order升序
[ { "id": 1, "name": "estate", "title": "物业管理", "type": "nav", "leave": 1, "order": 1, "parent_id": 0, "url": "/estate" },
{ "id": 2, "name": "house", "title": "费用管理", "type": "nav", "leave": 2, "order": 1, "parent_id": 1, "url": "estate" },
{ "id": 3, "name": "temporaryCharges", "title": "临时收费", "type": "nav", "leave": 3, "order": 1, "parent_id": 2, "url": "charge" },
{ "id": 4, "name": "propertyFees", "title": "物业费", "type": "nav", "leave": 3, "order": 2, "parent_id": 2, "url": "propertyFees" },
{ "id": 6, "name": "propertyFeesEdit", "title": "编辑", "type": "handle", "leave": 4, "order": 2, "parent_id": 4, "url": null },
{ "id": 7, "name": "propertyFeesLogs", "title": "记录", "type": "handle", "leave": 4, "order": 3, "parent_id": 4, "url": null },
{ "id": 8, "name": "propertyFeesPayment", "title": "缴费", "type": "handle", "leave": 4, "order": 4, "parent_id": 4, "url": null },
{ "id": 9, "name": "carFees", "title": "停车费", "type": "nav", "leave": 3, "order": 3, "parent_id": 2, "url": "carFees" },
{ "id": 11, "name": "carFeesLogs", "title": "记录", "type": "handle", "leave": 4, "order": 2, "parent_id": 9, "url": null },
{ "id": 12, "name": "carFeesPayment", "title": "缴费", "type": "handle", "leave": 4, "order": 3, "parent_id": 9, "url": null },
{ "id": 13, "name": "gain", "title": "固定收益", "type": "nav", "leave": 3, "order": 4, "parent_id": 2, "url": "gain" },
{ "id": 14, "name": "bill", "title": "账单管理", "type": "nav", "leave": 2, "order": 2, "parent_id": 1, "url": "estate" },
......]
最终效果:
[{
"id": 1,
"name": "estate",
"title": "物业管理",
"type": "nav",
"leave": 1,
"order": 1,
"parent_id": 0,
"url": "/estate",
"children": [{
"id": 2,
"name": "house",
"title": "费用管理",
"type": "nav",
"leave": 2,
"order": 1,
"parent_id": 1,
"url": "estate",
"children": [{
"id": 3,
"name": "temporaryCharges",
"title": "临时收费",
"type": "nav",
"leave": 3,
"order": 1,
"parent_id": 2,
"url": "charge"
}, {
"id": 4,
"name": "propertyFees",
"title": "物业费",
"type": "nav",
"leave": 3,
"order": 2,
"parent_id": 2,
"url": "propertyFees",
"children": [{
"id": 6,
"name": "propertyFeesEdit",
"title": "编辑",
"type": "handle",
"leave": 4,
"order": 2,
"parent_id": 4,
"url": null
}, {
"id": 7,
"name": "propertyFeesLogs",
"title": "记录",
"type": "handle",
"leave": 4,
"order": 3,
"parent_id": 4,
"url": null
}
.......
}
}]
实现代码:
'use strict';
exports.formatRouter = {
/**
* 树形数据格式化,其中:
* 子级的’parent_id‘等于父级的id,
* 最高父级的id为0
*
* 排序规则为‘order’的数字顺序
* */
treeData(data) {
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// filter嵌套filter相当于for循环嵌套for循环
const result = cloneData.filter(parent => {
// 返回每一项的子级数组
const branchArr = cloneData.filter(child => parent.id === child.parent_id);
// 若子级存在,则给子级排序;且,赋值给父级
if (branchArr.length > 0) {
branchArr.sort(this.compare('order'));
parent.children = branchArr;
}
// 返回最高的父级,即,parent_id为0,
return parent.parent_id === 0;
});
// 给最高级的父级排序
result.sort(this.compare('order'));
return result;
},
// 对象数组排序
compare(property) {
return function(a, b) {
const value1 = a[property];
const value2 = b[property];
return value1 - value2;// 升序,降序为value2 - value1
};
},
};
说明:
其实就是两个for循环嵌套,性能上还没有for循环好。
欢迎关注公众号【无聊猿】,共同学习探讨
js格式化树形数据(扁平化数据)的更多相关文章
- json数据扁平化处理
json数据扁平化处理 /* * name:json数组拉平处理 * data:json对象或者数组 * k:前面开始可传空 */ function expandJsonTool(data, k) { ...
- MongoDB 聚合嵌入的数组(扁平化数据+管道)
MongoDB学习教程 先看下要操作的主要数据结构: { "_id" : "000015e0-3e9c-40b3-bd0d-6e7949f455c0", &qu ...
- js多维数组扁平化
数组扁平化,就是将多维数组碾平为一维数组,方便使用. 一:例如,一个二维数组 var arr = ['a', ['b', 2], ['c', 3, 'x']],将其扁平化: 1. 通过 apply ...
- js树形数据结构的扁平化
前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法:https://www.cnblogs.com/coder--wang/p/15013664.html 接下来我们来一波反向操作,封 ...
- JS将扁平化的数据处理成Tree结构
let jsonData= [ { id:1, parentId:0, name:"一级菜单A" }, { id:2, parentId:0, name:"一级菜单B& ...
- js数据结构处理--------扁平化数组处理为树结构数据
将扁平化的数组处理为树结构数据,我们可以利用对象来处理,对象的复制是浅拷贝,指向相同的内存地址: var arr = [ { id: 0, pid: -1, name: 'sadas' }, { id ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- js格式化JSON数据
前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...
- tensorflow tensor Flatten 张量扁平化,多通道转单通道数据
slim.flatten(inputs,outputs_collections=None,scope=None) (注:import tensorflow.contrib.slim as slim) ...
随机推荐
- 不会用SpringBoot连接Redis,那就赶紧看这篇
摘要:如何通过springboot来集成操作Redis. 本文分享自华为云社区<SpringBoot连接Redis操作教程>,作者: 灰小猿. 今天来和大家分享一个如何通过springbo ...
- Spring Cloud 源码分析之OpenFeign
OpenFeign是一个远程客户端请求代理,它的基本作用是让开发者能够以面向接口的方式来实现远程调用,从而屏蔽底层通信的复杂性,它的具体原理如下图所示. 在今天的内容中,我们需要详细分析OpenFei ...
- Java中stream的详细用法
来自于:Java 8 stream的详细用法_旅行者-CSDN博客_java stream 一.概述 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,可以执行 ...
- Hyperledger Fabric 2.x 自定义智能合约
一.说明 为了持续地进行信息的更新,以及对账本进行管理(写入交易,进行查询等),区块链网络引入了智能合约来实现对账本的访问和控制:智能合约在 Fabric 中称之为 链码,是区块链应用的业务逻辑. 本 ...
- Cobbler 批量安装操作系统
文章目录 环境准备 部署cobbler cobbler语法检查以及排错 问题1 问题2 问题3 问题4 问题5 问题6 问题7 问题8 修改dhcp模板 重启服务,再次检查 镜像配置 镜像导入 kic ...
- Java全栈学习路线、学习资源和面试题一条龙
肝了一个月,终于把Java学习路线.面试题资源和电子书资源都整理好了. Java 从基础到微服务的学习路线,其中还包括科班知识.学习建议.后续的学习引导和相应的学习资源(视频.书籍.网站),还整理了J ...
- C#的泛型和Java的伪泛型
C#的泛型和java的伪泛型,talk is cheap,show me the code C#泛型 下面结果,C#里面会输出false,如果这个还不能真正的说明C#的泛型是真的泛型,那就看下面这 ...
- Codeforces Round #769 (Div. 2)D,E
D.New Year Concert 传送门 题目大意: 一个长为 N ( 1 ≤ N ≤ 2 × 1 0 5 ) N(1\leq N\leq2\times 10^5) N(1≤N≤2×105)的序列 ...
- 修改Ehcache缓存中取到的值,缓存中的值也被修改了
问题现象 我们从Ehcache中取出缓存的对象,之后将对象中的属性进行了修改使用.等再次从缓存中拿到对象后,发现对象的值变成了上一次调用修改后的对象了. 原因 Ehcache中缓存的是原对象的引用,所 ...
- Arava: 写一个控制台风格的Mp3播放器
Mp3播放器 来写一个控制台版的mp3播放器.以前很喜欢 cmd.fm 这种控制台风格的播放器. 播放mp3使用 mp3spi 库:下载mp3spi库文件,解压,拿出根目录下的 mp3spi1.9.5 ...