js 数组 转为树形结构
题目：
source = [{
id: 1,
pid: 0,
name: 'body'
}, {
id: 2,
pid: 1,
name: 'title'
}, {
id: 3,
pid: 2,
name: 'div'
}]
转换为: [{
id: 1,
pid: 0,
name: 'body',
children: [{
id: 2,
pid: 1,
name: 'title',
children: [{
id: 3,
pid: 1,
name: 'div'
}]
}
}]
代码实现：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>toTree</title>
</head> <body>
<script>
var source = [{
id: 1,
pid: 0,
name: 'body'
}, {
id: 2,
pid: 1,
name: 'title'
}, {
id: 3,
pid: 1,
name: 'div'
}, {
id: 4,
pid: 3,
name: 'span'
}, {
id: 5,
pid: 3,
name: 'icon'
}, {
id: 6,
pid: 4,
name: 'subspan'
}] 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;
}
console.log(toTree(source))
</script>
</body> </html>
js 数组 转为树形结构的更多相关文章
- java将list转为树形结构的方法
目录 1.通过转化成json封装数据 2.通过java8 stream转换 1.通过转化成json封装数据 原始数据如下 [ { "name":"甘肃省", & ...
- 简单的JSON数组转树形结构
function toTree(data) { let result = [] if(!Array.isArray(data)) { return result } data.forEach(item ...
- nashorn中js数组转为对象的问题
背景 在项目中,使用jdk中的nashorn执行javascript脚本,例如如下脚本片段: let ctx = session.ctx; ctx.confirm = { //车牌划分后的数组 seg ...
- 在JavaScript中使用json.js：使得js数组转为JSON编码
在json的官网中下载json.js,然后在script中引入,以使用json.js提供的两个关键方法. 1.数组对象.toJSONString() 这个方法将返回一个JSON编码格式的字符串,用来表 ...
- js List<Map> 将偏平化的数组转为树状结构并排序
数据格式: [ { "id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59", "parentId":&quo ...
- JS 树形结构与数组结构相互转换、在树形结构中查找对象
总是有很多需求是关于处理树形结构的,所以不得不总结几个常见操作的写法.¯\_(ツ)_/¯ 首先假设有一个树形结构数据如下 var tree=[ { 'id': '1', 'name': '教学素材管理 ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- js文章列表的树形结构输出
文章表设计成这样了 后端直接给了无任何处理的json数据,现在要前端实现树形结构的输出,其实后端处理更简单写,不过既然来了就码出来 var doclist = [{ "id": 1 ...
- 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
随机推荐
- [转]“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)
既然要学.NET,就要先认识认识她,我不喜欢大段大段文字的东西,自己通过理解,画个图,来看看.NET的沉鱼落雁,闭月羞花之容. 最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基 ...
- 管理Mysql常用指令
知识会更新,数据库系统也一样,本文只保证对Mysql 5.7以及MariaDB 10有效. 编码篇 展示当前默认的编码和字符集 SHOW VARIABLES LIKE 'char%'; 修改服务器默认 ...
- LockSupport的park和unpark的基本使用,以及对线程中断的响应性
LockSupport是JDK中比较底层的类,用来创建锁和其他同步工具类的基本线程阻塞原语.java锁和同步器框架的核心AQS:AbstractQueuedSynchronizer,就是通过调用Loc ...
- springboot 表单校验
实体: @Entity public class User implements Serializable { /** * 编号 */ @Id @GeneratedValue private Long ...
- [Android Pro] 跨平台反编译工具 jadx (ubuntu亲测 可用）
github : https://github.com/skylot/jadx 输入: .dex, .apk, .jar or .class 输出: 资源文件 和 class文件 不支持重新打包, ...
- 最课程启示录：L风的李同学
李同学是一个特殊的存在. 他永远是学员群里话最多的一个男同学.注意,这里加了一个定语“男”,这当然意味着不久的将来,我们的学员启示录将会出现一个话多的女同学. 我并不是第一天知道他话多.据说,他在来最 ...
- [转]通过查看mysql 配置参数、状态来优化你的mysql
From : http://wangwei007.blog.51cto.com/68019/967278 mysql的监控方法大致分为两类: 1.连接到mysql数据库内部,使用show status ...
- verilog语法实例学习(7)
常用的时序电路介绍 组合电路:这类电路的输出信号值仅却决于输入端信号值. 时序电路:时序电路的输出值不仅取决于当前的输入值,还取决于电路的历史状态,所以时序逻辑电路中包含保存逻辑信号值的存储元件,存储 ...
- USB线插拔检测使用UEventObserver检测uevent事件的分析
说实话这玩样儿的代码量真的很少,大家如果能耐得住性子啃一会儿也就能撸懂了. 在这之前研究USB线插拔的时候就知道了有这么个东西,当时也就看了看,但没做什么笔记.最近想用起来,却发现就只有个名字在记忆中 ...
- Go语言之高级篇beego框架安装与使用
一.beego框架 1.beego框架简介 beego 是一个快速开发 Go 应用的 HTTP 框架,他可以用来快速开发 API.Web 及后端服务等各种应用,是一个 RESTful 的框架,主要设计 ...