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数组转树形结构的更多相关文章

  1. 后台返回平铺数据,如何转换成树形json并渲染树形结构,ant tree 异步加载

    如何后台返回对象数组(平铺式) 1.根据字段标识(板块)获取根节点 ### initTreeData(dataOrg){ var resultArr=dataOrg[0] var secArr=[]; ...

  2. Json数据产生树形结构

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. js 数组 转为树形结构

    题目: source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 2, na ...

  4. JS 树形结构与数组结构相互转换、在树形结构中查找对象

    总是有很多需求是关于处理树形结构的,所以不得不总结几个常见操作的写法.¯\_(ツ)_/¯ 首先假设有一个树形结构数据如下 var tree=[ { 'id': '1', 'name': '教学素材管理 ...

  5. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  6. 树形结构JSON的实现方法

    在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...

  7. Java实现树形结构的数据转Json格式

    在项目中难免会用到树形结构,毕竟这是一种常用的组织架构.楼主这里整理了两个实现的版本,可以直接拿来使用,非常方便. 楼主没有单独建项目,直接在以前的一个Demo上实现的.第一种,看下面代码: pack ...

  8. 使用Oracle数据库实现树形结构表的子-父级递归查询和删除,通过级联菜单简单举例

    前言: 我们在开发中,常常遇到单表的子-父id级联的表结构,在树形的深度不确定的情况下,一次查询出某个树形结构下的所有具有子-父级关系的数据变得十分困难. 这时,我们使用oracle提供的CONNEC ...

  9. 公用表表达式CTE简单递归使用-简单树形结构

    1.建表脚本 CREATE TABLE [dbo].[tb_tree]( ,) NOT NULL, [ParentId] [int] NULL, ) NULL, CONSTRAINT [PK_tb_t ...

随机推荐

  1. 深入 Laravel 内核之装饰模式

    装饰模式核心内容: 装饰模式可以在不影响组件对象的情况下,以动态.透明的方式从外部给对象添加功能: 装饰器模式的本质就是动态组合.动态是手段,组合是目的.装饰模式是通过把复杂的功能简单化.分散化,在运 ...

  2. MyBatis 二级缓存实现详解及使用注意事项

    二级缓存介绍 在上文中提到的一级缓存中,其最大的共享范围就是一个SqlSession内部,如果多个SqlSession之间需要共享缓存,则需要使用到二级缓存.开启二级缓存后,会使用CachingExe ...

  3. RabbitMQ开启SSL与SpringBoot连接测试

    楔子 近期公司程序被安全扫描出 远程主机允许明文身份验证 中风险漏洞,查了下修复方案,RabbitMQ官方提供了SSL连接方式,而且 SpringBoot AMQP 也支持 SSL 连接.以下将配置R ...

  4. Springboot整合Mybatis,连接多个数据库(Mysql+Oracle)

    maven依赖,需要注意的是mysql使用的版本 1 <dependencies> 2 <dependency> 3 <groupId>com.oracle.dat ...

  5. 《手把手教你》系列技巧篇(五十七)-java+ selenium自动化测试-下载文件-下篇(详细教程)

    1.简介 前边几篇文章讲解完如何上传文件,既然有上传,那么就可能会有下载文件.因此宏哥就接着讲解和分享一下:自动化测试下载文件.可能有的小伙伴或者童鞋们会觉得这不是很简单吗,还用你介绍和讲解啊,不说就 ...

  6. Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401开发

    Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...

  7. Android官方文档翻译 十 2.3Styling the Action Bar

    Styling the Action Bar 设计菜单栏的样式 This lesson teaches you to 这节课教给你 Use an Android Theme 使用一个Android主题 ...

  8. [C语言基础] 数组与指针之间的引用

    通过指针引用数组,通过数组引用指针,你搞明白了么?通过下面3种情形来了解一下数组和指针 Case 1. unsigned char arry[10]; unsigned char *ptr; unsi ...

  9. Servlet-通过继承HttpServlet类实现Servlet程序

    通过继承HttpServlet类实现Servlet程序(开发一般用) 一般在实际项目开发中,都是使用继承 HttpServlet类的方式实现Servlet程序 1,编写一个类去继承 HttpServl ...

  10. logger命令

    logger是一个shell命令接口,可以通过该接口使用Syslog的系统日志模块,还可以从命令行直接向系统日志文件()写入一行信息. -i 在记录上显示pid进程号 -t 给日志记录打标签 1.直接 ...