需求:

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格式化树形数据(扁平化数据)的更多相关文章

  1. json数据扁平化处理

    json数据扁平化处理 /* * name:json数组拉平处理 * data:json对象或者数组 * k:前面开始可传空 */ function expandJsonTool(data, k) { ...

  2. MongoDB 聚合嵌入的数组(扁平化数据+管道)

    MongoDB学习教程 先看下要操作的主要数据结构: { "_id" : "000015e0-3e9c-40b3-bd0d-6e7949f455c0", &qu ...

  3. js多维数组扁平化

    数组扁平化,就是将多维数组碾平为一维数组,方便使用. 一:例如,一个二维数组 var arr = ['a', ['b', 2], ['c', 3, 'x']],将其扁平化: 1.  通过 apply ...

  4. js树形数据结构的扁平化

    前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法:https://www.cnblogs.com/coder--wang/p/15013664.html 接下来我们来一波反向操作,封 ...

  5. JS将扁平化的数据处理成Tree结构

    let jsonData= [ { id:1,  parentId:0, name:"一级菜单A" }, { id:2, parentId:0, name:"一级菜单B& ...

  6. js数据结构处理--------扁平化数组处理为树结构数据

    将扁平化的数组处理为树结构数据,我们可以利用对象来处理,对象的复制是浅拷贝,指向相同的内存地址: var arr = [ { id: 0, pid: -1, name: 'sadas' }, { id ...

  7. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  8. js格式化JSON数据

    前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...

  9. tensorflow tensor Flatten 张量扁平化,多通道转单通道数据

    slim.flatten(inputs,outputs_collections=None,scope=None) (注:import tensorflow.contrib.slim as slim)  ...

随机推荐

  1. 监听器(Listener)详解及举例

    概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 监听器组成要素: 事件源:事 ...

  2. Maven 项目报出警告:Warning:java: source value 1.5 is obsolete and will be removed in a future release

    感谢原文作者:Hxinguan 原文链接:https://www.cnblogs.com/Hxinguan/p/6132446.html 问题: 1.创建maven项目的时候,jdk版本是1.5版本, ...

  3. Servlet核心内容

    Servlet重要的四个生命周期方法 构造方法: 创建servlet对象的时候调用.默认情况下,第一次访问servlet的时候创建servlet对象只调用1次.证明servlet对象在tomcat是单 ...

  4. python篇第6天【数据类型】

    Python有五个标准的数据类型: Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) Python数字 数字数据类型用于存储数值. 他 ...

  5. 02 HTML标签

    2. HTML标签 1. HTML简介 用户使用浏览器打开网页看到结果的过程就是:浏览器将服务端的文本文件(即网页文件)内容下载到本地,然后打开显示的过程. 而文本文件的文档结构只有空格和黄航两种组织 ...

  6. Solution -「国家集训队」「洛谷 P2839」Middle

    \(\mathcal{Description}\)   Link.   给定序列 \(\{a_n\}\),\(q\) 组询问,给定 \(a<b<c<d\),求 \(l\le[a,b] ...

  7. linux 普通分区与lvm分区

    安装linux系统时 有时候会提示lvm分区与标准分区 首先普及一下lvm分区:lvm是 logical volume manager (逻辑卷管理),linux环境下对磁盘分区的管理:他解决了安装系 ...

  8. 如何强制关闭Win10自动更新

    今天我向往常一样打开了电脑,在工作时突然感觉CPU风扇嗡嗡的响电脑开始变得极慢内存也开始上涨,我意识到不妙了,Windows10 又开始在后台给我搞事情了,由于我的电脑安装有开机还原功能,所以每次开机 ...

  9. pytest(13)-多线程、多进程执行用例

    有些项目的测试用例较多,测试用例时需要分布式执行,缩短运行时间. pytest框架中提供可用于分布式执行测试用例的插件:pytest-parallel.pytest-xdist,接下来我们来学习这两个 ...

  10. Oracle表数据或结构误删还原

    数据误删 表结构没有发生改变 --开启表字段转移,不开启无法还原 alter table 表名 enable row movement; --数据闪回 flashback table 表名 to ti ...