使用js将后台返回的数据转换成树形结构

将类似如下数据转换成树形的数据:

[{ id: 1, name: '1', },{ id: 2, name: '1-1', parentId: 1 },{ id: 3, name: '1-1-1', parentId: 2 },{ id: 4, name: '1-2', parentId: 1 },{ id: 5, name: '1-2-2', parentId: 4 },{ id: 6, name: '1-1-1-1', parentId: 3 },{ id: 7, name: '2', }]

 

转换方法为:

function translateDataToTree(data) {let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)let translator = (parents, children) => {parents.forEach((parent) => {children.forEach((current, index) => {if (current.parentId === parent.id) {let temp = JSON.parse(JSON.stringify(children))temp.splice(index, 1)translator([current], temp)typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]}})})}translator(parents, children)return parents
}

 

转换后数据是:

[{"id": 1,"name": "1","children": [{"id": 2,"name": "1-1","parentId": 1,"children": [{"id": 3,"name": "1-1-1","parentId": 2,"children": [{"id": 6,"name": "1-1-1-1","parentId": 3}]}]},{"id": 4,"name": "1-2","parentId": 1,"children": [{"id": 5,"name": "1-2-2","parentId": 4}]}]},{"id": 7,"name": "2"}
]

思路:将有父子关系的数组数据先分为两类,一类是没有父节点的数据(取个别名parents),另一类是有父节点的数据(取个别名children),然后通过遍历parents,对每一个父节点在children查找对应的子节点,并将其放入父节点的children中(这里我的是以children表示子节点),然后每个子节点又作为一个父节点来重复之前的动作。(可能这里描述的不太清楚,下面我将对方法进行注释说明)

/*** 该方法用于将有父子关系的数组转换成树形结构的数组* 接收一个具有父子关系的数组作为参数* 返回一个树形结构的数组*/
function translateDataToTree(data) {//没有父节点的数据let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)//有父节点的数据let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)//定义转换方法的具体实现let translator = (parents, children) => {//遍历父节点数据parents.forEach((parent) => {//遍历子节点数据children.forEach((current, index) => {//此时找到父节点对应的一个子节点if (current.parentId === parent.id) {//对子节点数据进行深复制,这里只支持部分类型的数据深复制,对深复制不了解的童靴可以先去了解下深复制let temp = JSON.parse(JSON.stringify(children))//让当前子节点从temp中移除,temp作为新的子节点数据,这里是为了让递归时,子节点的遍历次数更少,如果父子关系的层级越多,越有利temp.splice(index, 1)//让当前子节点作为唯一的父节点,去递归查找其对应的子节点
          translator([current], temp)//把找到子节点放入父节点的children属性中typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]}})})}//调用转换方法
  translator(parents, children)//返回最终的结果return parents
}

 

 

转载于:https://www.cnblogs.com/wjs0509/p/11082850.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/350214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HMM及维特比算法

参考 HMM:https://blog.csdn.net/sinat_25346307/article/details/79119366 Viterbi算法:https://blog.csdn.net/shenxiaoming77/article/details/79228378 一、HMM定义 以词性标注为例说明 图1 词性标注任务1、问题:如图1所示&#xff0c…

java 大文件 处理_用Java处理大文件

java 大文件 处理我最近不得不处理一组包含历史逐笔交易的外汇市场数据的文件,并很快意识到使用传统的InputStream都无法将它们读取到内存中,因为每个文件的大小都超过4 GB。 Emacs甚至无法打开它们。 在这种特殊情况下,我可以编写一个简单的…

python项目结构目录结构采用的是_python 项目目录结构设置

python 项目目录结构设置为项目设置目录结构是为了将功能类似的文件放置在同一目录内,增强项目的可读性和可维护性。如果一个python项目功能单一,代码量很小,那就没必要设置的这么复杂。下图是一个示例项目的目录结构:1&#xff0…

HMM和CRF 条件随机场详解

转载于 https://blog.csdn.net/qq_42901761/article/details/104206799 这位大神ffffatgoose总结的很好

使用Spring Cloud Config作为外部化配置

关于连续交付 ,最重要的实践之一是只构建一次二进制文件,并在不同的环境(开发,测试,验收等)中使用该二进制文件 。 这意味着最有可能需要外部化应用程序的配置 。 对于Spring Boot应用程序,将其…

51nod1040 最大公约数之和,欧拉函数或积性函数

1040 最大公约数之和 给出一个n&#xff0c;求1-n这n个数&#xff0c;同n的最大公约数的和。比如&#xff1a;n 6时&#xff0c;1,2,3,4,5,6 同6的最大公约数分别为1,2,3,2,1,6&#xff0c;加在一起 15 看起来很简单对吧&#xff0c;但是n<1e9&#xff0c;所以暴力是不行的…

hide show vue 动画_Vue2.x学习四:过渡动画

Vue 在插入、更新或者移除 DOM 时&#xff0c;提供多种不同方式的应用过渡效果。请注意它的应用场景并不是说我们写了一个动画之后让它一直在动&#xff0c;而是在一个模块显示或隐藏的时候去做一种特效&#xff0c;使得它的过程有过渡性&#xff0c;而不是很突兀的直接消失或显…

Pytorch cifar10离线加载二进制文件

说明直接离线加载cifar10到Pytorch 直接加载6个文件到pytorchdata_batch_1data_batch_2data_batch_3data_batch_4data_batch_5test_batchimport os import cv2 import pickle import numpy as np import matplotlib.pyplot as pltimport torchvision from torch.autograd impor…

spring cloud gateway 深入了解 - Predicate

文章来源 spring cloud gateway 通过谓词&#xff08;Predicate&#xff09;来匹配来自用户的请求 为了方便&#xff0c;使用postman测试不同的谓词的效果 路径谓词&#xff08;Predicate&#xff09;—— 最简单的谓词 配置如下spring:cloud:gateway:routes:# 匹配指定路径的路…

python漏洞检测脚本_URL重定向漏洞,python打造URL重定向漏洞检测脚本

前言&#xff1a;今天学习了重定向漏洞&#xff0c;这个漏洞比较好理解漏洞名&#xff1a;URL重定向漏洞威胁&#xff1a;低漏洞的来源&#xff1a;开发者对head头做好对应的过滤和限制例子&#xff1a;有漏洞的网站&#xff1a;http://a.com/x.php?urlhttp://a.com/login.php…

Pytorch cifar100离线加载二进制文件

说明&#xff1a;直接加载cifar100二进制文件到Pytorch 直接加载文件到pytorchmetatesttrain import os import cv2 import pickle import time import numpy as np import matplotlib.pyplot as pltimport torchvision from torch.autograd import Variable import torch.uti…

为单个Web应用程序配置多个上下文根– JBoss

有时&#xff0c;我们通过在jboss-web.xm l中定义一个来对应用程序进行更改&#xff0c;以支持利用JBoss功能的多个上下文根&#xff0c;如下所示&#xff1a; webapp / WEB-INF / jboss-web.xml&#xff1a; <?xml version"1.0" encoding"UTF-8"?&…

手动升级ubuntu 18.04内核从4.15.0-45-generic到4.15.0-52-generic

1 从下面官网下载相应的包&#xff0c;共3个。 https://kernel.ubuntu.com/~kernel-ppa/mainline/v4.15-rc9/ linux-headers-4.15.0-041500rc9-generic_4.15.0-041500rc9.201801212130_amd64.deb linux-headers-4.15.0-041500rc9_4.15.0-041500rc9.201801212130_all.deb linux-…

cmd52命令发送 mmc_乾坤合一~Linux SD/MMC/SDIO驱动分析(上)

一、SD/MMC/SDIO概念区分SD(SecureDigital)与 MMC(MultimediaCard)SD 是一种 flash memory card 的标准&#xff0c;也就是一般常见的 SD 记忆卡&#xff0c;而 MMC 则是较早的一种记忆卡标准&#xff0c;目前已经被 SD 标准所取代。在维基百科上有相当详细的 SD/MMC 规格说明&…

Pytorch MNIST直接离线加载二进制文件到pytorch

说明&#xff1a;MNIST直接离线加载二进制文件到pytorch 直接以下4个文件读入数据到pytorch中t10k-images-idx3-ubyte.gzt10k-labels-idx1-ubyte.gztrain-images-idx3-ubyte.gztrain-labels-idx1-ubyte.gz import os import numpy as np import gzipimport torch.utils.data a…

爱与愁的心痛

爱与愁的心痛 题目链接 题意 这道题的题意是&#xff0c;给定一个整数数组&#xff0c;数组中的每个元素代表一个不爽的事情的刺痛值。现在需要找出连续m个刺痛值的和的最小值。 思路 读取输入和初始化遍历数组并计算窗口和输出最小和 坑点 数组越界重复计算窗口和 算法一&am…

begintrans返回值_SQL事务回滚 ADO BeginTrans, CommitTran 以及 RollbackTrans 方法

定义和用法这三个方法与 Connection 对象使用&#xff0c;来保存或取消对数据源所做的更改。注释&#xff1a;并非所有提供者都支持事务。注释&#xff1a;BeginTrans、CommitTrans 和 RollbackTrans 方法在客户端 Connection 对象上无效。那客户端不能支持事务? 这是什么意思…

Pytorch Fashion_MNIST直接离线加载二进制文件到pytorch

说明&#xff1a;Fashion_MNIST直接离线加载二进制文件到pytorch 将4个gz直接加载到pytoch用来训练t10k-images-idx3-ubyte.gzt10k-labels-idx1-ubyte.gztrain-images-idx3-ubyte.gztrain-labels-idx1-ubyte.gz import os import numpy as np import gzip import matplotlib.p…

jQuery选择器种类整理

选择器概念 jQuery选择器是通过标签、属性或者内容对HTML内容进行选择&#xff0c;选择器运行对HTML元素组或者单个元素进行操作。 jQuery选择器使用$符号&#xff0c;等同于jquery&#xff0c;例如&#xff1a; $(“li”) jquery(“li”) 同样等同于javascript中的&#xff1…

jee过滤器应用场景_将涡轮增压器添加到JEE Apps

jee过滤器应用场景我扮演的关键角色之一是在本地社区中传播Akka。 作为讨论的一部分&#xff0c;人们通常会想到的问题/疑问是Akka如何针对编写良好的Java / JEE应用程序提供更好的可伸缩性和并发性。 由于底层硬件/ JVM保持不变&#xff0c;因此参与者模型如何比传统的JEE应用…