简单的JSON数组转树形结构
function toTree(data) {
let result = []
if(!Array.isArray(data)) {
return result
}
data.forEach(item => {
delete item.children;
});
let map = {};
data.forEach(item => {
map[item.id] = item;
});
data.forEach(item => {
let parent = map[item.pid];
if(parent) {
(parent.children || (parent.children = [])).push(item);
} else {
result.push(item);
}
});
return result;
}
var source2 = [
{ id: 1, pid: 0, name: '扬水设备' },
{ id: 'ys1', pid: 1, name: '扬水1' },
{ id: 'yszj', pid: 'ys1', name: '扬水子集' },
{ id: 'lxb', pid: 1, name: '离心泵' },
{ id: 'lsbzj', pid: 'lxb', name: '离心泵子集' },
{ id: 6, pid: 0, name: 'body' },
{ id: 2, pid: 6, name: 'title' },
{ id: 3, pid: 6, name: 'div' },
{ id: 4, pid: 3, name: 'span' },
{ id: 5, pid: 3, name: 'icon' }
]
console.log(toTree(source2))
</script>
简单的json数组转换树形结构.仅作记录
简单的JSON数组转树形结构的更多相关文章
- 后台返回平铺数据,如何转换成树形json并渲染树形结构,ant tree 异步加载
如何后台返回对象数组(平铺式) 1.根据字段标识(板块)获取根节点 ### initTreeData(dataOrg){ var resultArr=dataOrg[0] var secArr=[]; ...
- Json数据产生树形结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- js 数组 转为树形结构
题目: source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 2, na ...
- JS 树形结构与数组结构相互转换、在树形结构中查找对象
总是有很多需求是关于处理树形结构的,所以不得不总结几个常见操作的写法.¯\_(ツ)_/¯ 首先假设有一个树形结构数据如下 var tree=[ { 'id': '1', 'name': '教学素材管理 ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- 树形结构JSON的实现方法
在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...
- Java实现树形结构的数据转Json格式
在项目中难免会用到树形结构,毕竟这是一种常用的组织架构.楼主这里整理了两个实现的版本,可以直接拿来使用,非常方便. 楼主没有单独建项目,直接在以前的一个Demo上实现的.第一种,看下面代码: pack ...
- 使用Oracle数据库实现树形结构表的子-父级递归查询和删除,通过级联菜单简单举例
前言: 我们在开发中,常常遇到单表的子-父id级联的表结构,在树形的深度不确定的情况下,一次查询出某个树形结构下的所有具有子-父级关系的数据变得十分困难. 这时,我们使用oracle提供的CONNEC ...
- 公用表表达式CTE简单递归使用-简单树形结构
1.建表脚本 CREATE TABLE [dbo].[tb_tree]( ,) NOT NULL, [ParentId] [int] NULL, ) NULL, CONSTRAINT [PK_tb_t ...
随机推荐
- CentOS 7 连接不到网络解决方法(设置静态ip)
使用VM12创建虚拟机并安装CentOS 7,但是安装完成后发现连接不到网络. ping jd.com发现不通 因为在创建虚拟机的时候 我们选择的是NAT模式 这里给出NAT模式下对应的的解决方法: ...
- 经典变长指令-ModRM
一.如何计算ModRM 0X88 MOV Eb,Gb G:通用寄存器 0X89 MOV Ev,Gv E:寄存器/内存 0X8A MOV Gb,Eb b:字节 0X8B MOV Gv,Ev v:Word ...
- 《挑战程序设计竞赛》1.6.2-POJ的题目Ants
#include <stdio.h> #define max(a, b) (((a) > (b)) ? (a) : (b)) #define min(a, b) (((a) < ...
- 网络协议学习笔记(七)流媒体协议和P2P协议
概述 上一篇讲解了http和https的协议的相关的知识,现在我们谈一下流媒体协议和P2P协议. 流媒体协议:如何在直播里看到美女帅哥 最近直播比较火,很多人都喜欢看直播,那一个直播系统里面都有哪些组 ...
- 若依(ruoyi)代码生成树表结构的那些坑
若依(RuoYI)代码生成树表结构的那些坑 相信许多做后端开发的同学,一定用过若依这款框架,这款框架易上手,适合用来做后台管理系统,但是其中也存在一些坑,稍不注意就会中招(大佬可以忽略...) 今天, ...
- Solon Web 开发,六、过滤器、处理、拦截器
Solon Web 开发 一.开始 二.开发知识准备 三.打包与运行 四.请求上下文 五.数据访问.事务与缓存应用 六.过滤器.处理.拦截器 七.视图模板与Mvc注解 八.校验.及定制与扩展 九.跨域 ...
- 【一个小发现】VictoriaMetrics中:vm-storage的备份文件,无法给单机版使用
首先导入一个按天的备份: vmrestore-prod \ -configFilePath="/etc/cos/config.ini" \ -credsFilePath=" ...
- linux中链接错误的时候,快速找到缺失的符号在哪个库中
编译一个opencv程序,链接的时候出现大量的如下错误: /home/admin/opencv/opencv-master/modules/imgproc/src/color_lab.cpp:23: ...
- 巧用 Base62 解决字段太短的问题
最近银联一纸 259 号改造通知,所有支付机构开始改造支付交易,上传终端信息. 不知道其他支付机构的小伙伴针对这次改造是否开始了? 由于这次银联给的时间非常少,我们这边改动涉及到相关上游一起改造,所以 ...
- docker四种模式
1 host模式众所周知,Docker使用了Linux的Namespaces技术来进行资源隔离,如PID Namespace隔离进程,MountNamespace隔离文件系统,Network Name ...