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. Jenkins_构建任务提示文件权限不足的处理方法

    问题现象 构建任务失败,查看日志提示读取文件权限不足. 问题分析 在linux上查看对应文件,发现这些文件只有root用户才有读的权限,jenkins默认是以jenkins用户在操作linux系统,因 ...

  2. [ flask ] flask-restful 实现嵌套的有关系的输出字段

    问题描述: 1. 先说明数据关系:有用户,和菜谱.一个用户可以拥有多个菜谱:一对多的关系 2.  resources/users.py 的输出字段: user_fields = { 'id':fiel ...

  3. LC 二叉树的最大深度

    https://leetcode-cn.com/leetbook/read/top-interview-questions-easy/xnd69e/ Recursion /** * Definitio ...

  4. Zuul网关 @EnableZuulProxy 和 @EnableZuulServer 的区别

    1. @EnableZuulProxy 2. @EnableZuulServer 3.解释 1)@EnableZuulProxy简单理解为@EnableZuulServer的增强版, 当Zuul与Eu ...

  5. 使用 arguments 对象

    arguments 对象表示参数集合,它是一个伪类数组,拥有与数组相似的结构,可以通过数组下标的形式访问函数实参值,但是没有基础 Array 的原型方法. //函数没有定义形参,但是在函数体内通过 a ...

  6. Echart可视化学习(三)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 编写中间模块 添加显示样式 ...

  7. IDEA安装与配置

    一.安装 二.配置 配置字体:source pro code 忽略大小写提示 自动导包 多 tab显示 设置快捷键 设置鼠标悬浮提示 设置行号和方法分隔符 设置maven 断点调试 字符编码 自动删除 ...

  8. 网络协议学习笔记(五)套接字Socket

    概述 前面学习网络知识的时候写过一篇关于套接字的随笔见<JAVA SOCKET 详解>,现在本人正在系统的学习网络知识,现在除了温故知新之外,在详细的学习记录一下套接字的知识. Socke ...

  9. 403 Invalid CORS request 跨域问题 invalid+cors+request什么意思

    5.跨域问题 跨域:浏览器对于javascript的同源策略的限制 . 以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 ...

  10. 使用.NET 6开发TodoList应用(30)——实现Docker打包和部署

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 .NET 6 Web API应用使用最多的场景是作为后端微服务应用,在实际的项目中,我们一般都是通过将应用程序打包成docke ...