js 实现 list转换成tree的方法示例（数组到树）

目标：

JS 将有父子关系的平行数组转换成树形数据

方法：双重遍历，一次遍历parentId,一次遍历id == parendId;

该方法应该能很容易被想到，实现起来也一步一步可以摸索出来；

const oldData = [
  {id:1,name:'boss',parentId:0},
  {id:2,name:'lily',parentId:1},
  {id:3,name:'jack',parentId:1},
  {id:4,name:'john',parentId:2},
  {id:5,name:'boss2',parentId:0},
]

function listToTree(oldArr){
  oldArr.forEach(element => {
    let parentId = element.parentId;
    if(parentId !== 0){
      oldArr.forEach(ele => {
        if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；
          if(!ele.children){
            ele.children = [];
          }
          ele.children.push(element);
        }
      });
    }
  });
  console.log(oldArr) //此时的数组是在原基础上补充了children;
  oldArr = oldArr.filter(ele => ele.parentId === 0); //这一步是过滤，按树展开，将多余的数组剔除；
  console.log(oldArr)
  return oldArr;
}
listToTree(oldData);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

    本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

  • javascript将list转换成树状结构的实例

    如下所示: /** * 将list装换成tree * @param {Object} myId 数据主键id * @param {Object} pId 数据关联的父级id * @param {Object} list list集合 */ function listToTree(myId,pId,list){ function exists(list, parentId){ for(var i=0; i<list.length; i++){ if (list[i][myId] == parent

  • js 实现 list转换成tree的方法示例（数组到树）

    目标: JS 将有父子关系的平行数组转换成树形数据 方法:双重遍历,一次遍历parentId,一次遍历id == parendId; 该方法应该能很容易被想到,实现起来也一步一步可以摸索出来: const oldData = [ {id:1,name:'boss',parentId:0}, {id:2,name:'lily',parentId:1}, {id:3,name:'jack',parentId:1}, {id:4,name:'john',parentId:2}, {id:5,name:

  • JS自定义函数实现时间戳转换成date的方法示例

    本文实例讲述了JS自定义函数实现时间戳转换成date的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取当前年/月/日(www.jb51.net)</title> </head> <body> <script> function UnixToDate(unixTime

  • C#实现把图片转换成二进制以及把二进制转换成图片的方法示例

    本文实例讲述了C#实现把图片转换成二进制以及把二进制转换成图片的方法.分享给大家供大家参考,具体如下: private void button1_Click(object sender, EventArgs e) { string path = this.textBox1.Text; byte[] imgBytesIn = SaveImage(path); ShowImgByByte(imgBytesIn); //Parameters.Add("@Photo", SqlDbType.B

  • java实现将字符串中首字母转换成大写，其它全部转换成小写的方法示例

    java实现将字符串中首字母转换成大写，其它全部转换成小写的方法示例

    本文实例讲述了java实现将字符串中首字母转换成大写,其它全部转换成小写的方法.分享给大家供大家参考,具体如下: public class TestSubstring { public static void main(String[] args) { String s = getConvert("adsJKJ3K21AfaAD134F13241d134134s141faAAFDF"); System.out.println(s); } //将一个字符串中的首字母转换成大写,其它的全部

  • Python实现将Excel转换成xml的方法示例

    本文实例讲述了Python实现将Excel转换成xml的方法.分享给大家供大家参考,具体如下: 最近写了个小工具 用于excel转成xml 直接贴代码吧: #coding=utf-8 import xlrd import datetime import time import sys import xml.dom.minidom import os print sys.getdefaultencoding() reload(sys) #就是这么坑爹,否则下面会报错 sys.setdefaulte

  • Js中将Long转换成日期格式的实现方法

    Js中将Long转换成日期格式的实现方法

    主要用于将数据库中日期用long表示,转换成YYYY-MM-DD格式或YYYY-MM-DD HH:mm:ss格式 若显示为YYYY-MM-DD HH:mm:ss格式,调用如下方法: datetimeFormat(longTypeDate); 若显示为YYYY-MM-DD格式,调用如下方法: dateFormat(longTypeDate); Js中具体方法如下: /* * 时间格式化工具 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期 */

  • js中的时间转换—毫秒转换成日期时间的示例代码

    js毫秒时间转换成日期时间 复制代码 代码如下: var oldTime = (new Date("2011/11/11 20:10:10")).getTime(); //得到毫秒数 大多数是用毫秒数除以365*24*60*60&1000,这么转回去,这种方法转换太过复杂,年月日,时分秒都要不同的方法获取,而且有的年份有366天,有的365天,这么算起来就太过复杂了. 后面自己试了一个方法,居然成功了 复制代码 代码如下: var oldTime = (new Date(&qu

  • Oracle实现行转换成列的方法

    Oracle实现行转换成列的方法

    本文实例讲述了Oracle实现行转换成列的方法.分享给大家供大家参考,具体如下: 把行转成列 把学生表,成绩表,班级表,学科表 合并成一张成绩表效果如下: 创建表 --班级表 create table CLASS ( ID VARCHAR2(5) not null primary key, CLASSNAME VARCHAR2(10) ); --学生表 create table STUDENT ( ID VARCHAR2(10) not null primary key, NAME VARCHA

  • python实现将英文单词表示的数字转换成阿拉伯数字的方法

    本文实例讲述了python实现将英文单词表示的数字转换成阿拉伯数字的方法.分享给大家供大家参考.具体实现方法如下: import re _known = { 'zero': 0, 'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5, 'six': 6, 'seven': 7, 'eight': 8, 'nine': 9, 'ten': 10, 'eleven': 11, 'twelve': 12, 'thirteen': 13, 'fourt

  • ASP.NET实现将word文档转换成pdf的方法

    本文实例讲述了ASP.NET实现将word文档转换成pdf的方法,分享给大家供大家参考.具体实现步骤如下: 一.添加引用 复制代码 代码如下: using Microsoft.Office.Interop.Word; 二.转换方法   1.方法 复制代码 代码如下: /// <summary>     /// 把Word文件转换成pdf文件     /// </summary>     /// <param name="sourcePath">需要转

随机推荐