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. exit hook

    之前经常改 malloc_hook , realloc_hook,free_hook 为 one_gadget 来 get shell ,最近看到一种利用是改 exit hook(winmt师傅告诉我 ...

  2. Selenium_界面的刷新、后退、前进操作(4)

    import time from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driv ...

  3. Linux_yum安装时报404错误

    使用yum安装报错如下: [root@localhost ~]# yum install gcc 已加载插件:fastestmirror Loading mirror speeds from cach ...

  4. go.mod file not found in current directory or any parent directory; see 'go help modules'

    go的环境设置问题,执行 go env -w GO111MODULE=auto 我的环境:Windows 7, Go 1.17 D:\Apps\GOPATH\src\code.oldboyedu.co ...

  5. 面试官问,Redis 是单线程还是多线程?我懵了

    我们平时看到介绍 Redis 的文章,都会说 Redis 是单线程的.但是我们学习的时候,比如 Redis 的 bgsave 命令,它的作用是在后台异步保存当前数据库的数据到磁盘,那既然是异步了,肯定 ...

  6. #pragma pack() -----设置默认对齐数

    #pragma pack()  -----设置默认对齐数 预处理命令#pragma:程序如下 则根据修改的对齐数来算:则需要占据内存的大小是14 如果不进行设置,则按照编译器默认的对齐数来算:则需要占 ...

  7. Vulnhub - THE PLANETS: EARTH

    环境配置 从www.vulnhub.com下载靶机,在VMware中导入,自动分配IP 主机发现 通过对内网主机的扫描,VMware为目标主机 端口扫描 使用nmap对主机进行扫描 发现443端口信息 ...

  8. Java类与对象的创建

    以类的方式组织代码,以对象的方式组织(封装)数据 组织代码(类) public class Demo04 { String name;//默认值null int age;//默认值0 public v ...

  9. [C# 学习]窗体间调用控件

    一.方法1: 假如有两个窗体,Form_A和Form_B,每个窗体里都有一个按键,Button_A和Button_B,要实现单击Button_A显示窗体B,那么窗体A中Buttom_A的单击事件的程序 ...

  10. 【刷题-PAT】A1101 Quick Sort (25 分)

    1101 Quick Sort (25 分) There is a classical process named partition in the famous quick sort algorit ...