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,虽然我没写过,但是我见过,一些小功能做 ...
随机推荐
- Android热修复技术总结
https://blog.csdn.net/xiangzhihong8/article/details/77718004 插件化和热修复技术是Android开发中比较高级的知识点,是中级开发人员通向高 ...
- Chrome快捷键大全
Chrome上我基本不怎么用快捷键,但是发现了切换标签页的快捷键后觉得十分好用,所以就分享如下. 切换上一个标签:Ctrl+PgUp 切换下一个标签:Ctrl+PgDn 打开新标签页:Ctrl+T 通 ...
- Material Designer的低版本兼容实现（四）—— ToolBar
Toolbar其实是一个ActionBar的变体,大大扩展了Actionbar.我们可以像对待一个独立控件一样去使用ToolBar,可以将它放到屏幕的任何位置,不必拘泥于顶部,还可以将它改变高度 ...
- 磁共振中的T1， T2 和 T2*的原理和区别
从物理的角度,要理解这几个概念的区别,需要对原子核的磁化有所了解,本文通过一些图示对这几个概念进行简明的介绍. 首先,磁共振最基本的原理就是氢原子核在磁场中自旋运动时所具有的量子力学特性.在一个均匀磁 ...
- 数据库分库分表中间件：Mycat；分布式数据库;mysql的分布式事务
官网:http://mycat.io/,里面有电子书籍可以下载:http://www.mycat.io/document/mycat-definitive-guide.pdf 旧版本下载地址:http ...
- 【BZOJ】【4145】【AMPPZ2014】The Prices
状压DP/01背包 Orz Gromah 容易发现m的范围很小……只有16,那么就可以状压,用一个二进制数来表示买了的物品的集合. 一种简单直接的想法是:令$f[i][j]$表示前$i$个商店买了状态 ...
- libxml2 使用教程【转】
https://blog.csdn.net/zhoudaxia/article/details/8565731# 本文整理自官方使用教程http://xmlsoft.org/tutorial/inde ...
- ajax file upload 修改
先前 写过 JS 判断上传 文件 大小 后来发现一个问题, 就是单页面运行 js 没有问题, 但是基础呢个到项目中 有些时候 obj_img.dynsrc = file.value; 报错说没有 权限 ...
- 在Win7 Hyper-v虚拟机中挂接真实机的声卡
最近在测试Lync的语音功能,环境已在虚拟机中搭建好,但Hyper-V中不支持声卡,一直未测试成功,经过一番尝试后终于成功,细节如下: 1.真机为Win7 企业版,虚拟机也是Win7的企业版.(虚拟机 ...
- CodeFirst体验之且行且珍惜
CodeFirst作为一种新的开发理念和方式,EF Code-First相对于MVC中的DataFirst,ModelFirst确实开发效率确实高点,至少数据库建表这一块,直接用类映射到数据中,标记 ...