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,虽然我没写过,但是我见过,一些小功能做 ...
随机推荐
- Latex:多个公式使用同一个编号（右对齐）
\usepackage{amsmath} \begin{equation}\begin{aligned}equation 1 ... \\equation 2 ... \\equation 3 ... ...
- Dropout原理解析
1. Dropout简介 1.1 Dropout出现的原因 在机器学习的模型中,如果模型的参数太多,而训练样本又太少,训练出来的模型很容易产生过拟合的现象.在训练神经网络的时候经常会遇到过拟合的问题, ...
- golang导入包的几个说明：import
导入包: 标准包使用的是给定的短路径,如"fmt"."net/http" 自己的包,需要在工作目录(GOPATH)下指定一个目录,improt 导入包,实际上就 ...
- Netty端口被占用问题
问题: 最近发现Netty项目每次发布的时候Netty在重启时都会报端口被占用的异常, 需要过十几秒左右手动重启一遍, Netty才能恢复正常 目前猜测是由于Tomcat_restart的时候Ne ...
- maven清理.lastUpdated文件maven清理下载失败的jar,方便重新下载
因网络或其他的原因,maven下载jar等文件失败后,会在目录中存在 *.jar.lastUpdated ,如:xmlpull-1.1.3.1.jar.lastUpdated,此时,代码编译时会一直 ...
- 关于微软C#中的CHART图表控件的简单使用【转】
最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...
- iOS开发-UIActivityIndicatorView简单使用
软件开发的时候经常会遇到半天才加载出来数据的情况,不管是程序写的烂,还是说本来网速比较慢,一般都都会给个提示让用户感觉到我们在努力的加载数据,iOS可以通过UIActivityIndicatorVie ...
- Tensorflow进行POS词性标注NER实体识别 - 构建LSTM网络进行序列化标注
http://blog.csdn.net/rockingdingo/article/details/55653279 Github下载完整代码 https://github.com/rockingd ...
- Java-JUC（九）：使用Lock替换synchronized，使用Condition的await,singal,singalall替换object的wait,notify,notifyall实现线程间的通信
Condition: condition接口描述了可能会与锁有关的条件变量.这些用法上与使用object.wait访问隐式监视器类似,但提供了更强大的功能.需要特别指出的是,单个lock可能与多个Co ...
- 为Subline Text 3 添加支持ini文件语法高亮
转: http://lancelot.blog.51cto.com/393579/1783653 在Subline text 官网下载了Subline text 3 .不过发现没有对ini格式文件的语 ...