js List<Map> 将偏平化的数组转为树状结构并排序

数据格式:

[
{
"id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59",
"parentId":"6d460008-38f7-479d-b6d1-058ebc17dae3","myorder":1,
"name":"任务一"
},
{
"id":"6d460008-38f7-479d-b6d1-058ebc17dae3",
"parentId":"33978737-c722-4339-88a1-a9829dd4bca2","myorder":1,
"name":"项目一"
},
{
"id":"33978737-c722-4339-88a1-a9829dd4bca2",
"parentId":"5461ed61-543c-4ea1-9cb5-17b008e093a0","myorder":1,
"name":"课题一"
},
{
"id":"5461ed61-543c-4ea1-9cb5-17b008e093a0",
"parentId":"57e06272-eab4-4920-ae6a-25e055374851","myorder":1,
"name":"电子教案"
},
{
"id":"8d0723db-9087-4c83-8d0e-ab7f24ddf066",
"parentId":"6d460008-38f7-479d-b6d1-058ebc17dae3",
"name":"任务二","myorder":2
}
]
 1 var _data = ${videoList}
 2     // 将偏平化的数组转为树状结构 -- id为根节点
 3     function filterArray(data, id) {
 4         var fa = function(parentid) {
 5             var _array = [];
 6             for (var i = 0; i < data.length; i++) {
 7                 var n = data[i];
 8                 if (n.parentId === parentid) {
 9                     n.children = fa(n.id);
10                     _array.push(n);
11                 }
12             }
13             return _array;
14         }
15         return fa(id);
16     }
17   //根据myorder排序
18     function _sort(data){
19         for(var i =0; i<data.length; i++){
20             _sort(data[i].children)
21         }
22         data.sort(function(a,b){
23             return a.myorder>b.myorder
24         })
25     }
var data = filterArray(_data, id)
            _sort(data)
时间: 2024-08-27 07:59:41

js List<Map> 将偏平化的数组转为树状结构并排序的相关文章

使用Map辅助拼装树状结构,消除递归调用

目前菜单或其他树状结构在数据库中的存储,多数是以一个parentid作为关联字段,以一维形式存储.使用时全部查询出来,然后在内存中拼装成树状结构.现在主要涉及的是拼装方法的问题. 一般可以进行 递归调用来实现 过程如下:1.首先找到根节(s)点即没有上级节点的元素 2.根据找到的节点的id,遍历数据,查看parentid为此id的元素 将其 放到此元素的childlist中去3.对此元素的childlist 重复步骤2 2-3这个步骤的重复 一般通过递归来实现. 我采用的方法,是使用map作为辅

js 每日一更(数组转换成前端更容易解析的树状结构)

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="数组转换成前端更容易解析的树状结构" /> <meta name="description" content=&

POJ 2481 树状数组 区间覆盖(POJ2352 Stars 的变形题)(线段化点)

0)学会将题目情景转化为自己熟悉的结构或模型. 题目大意: 每个奶牛有自己的一个区间,求每个奶牛的区间所覆盖的子区间个数(注意,真子集,相等的不算),按照输入的顺序输出. 转化: 要学会将题目情景转化为自己熟悉的模型或结构上.把每个区间的左端x值作为点的x坐标,右端x值作为点的y坐标,就可以把所有区间转化为一个二维坐标图上的点集,而此时每个点左上方的点(同Stars那道题目一样不包括自身)的个数,就是每个区间所覆盖的子区间的个数(对应题目要求,这里或许可以再变形). 同POJ2481 Stars

atitit.js&#160;与c#&#160;java交互html5化的原理与总结.doc

atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参数个数1 1.3. 事件监听2 2. sendNSCommand2 2.1.1. --------nativeswing的实现2 3. 注册js 事件后台函数3 4. 后台c#3 5. 参考4 1. 实现html5化界面的要解决的策略 1.1. Js交互 Firefox与Chrome也提供了external对象,例如,他们都默认的实现了ope

&lt;&lt;&lt; Js对map的操作

var map = {}; // 赋值 var key = "key1"; var value = "value1"; map[key] = value; // 取值 alert(map[key]); if("key1" in map) { //判断是否存在 alert("OK"); } // 删除 delete map["key1"]; // 遍历 for(key in map){ console(key

js自定义Map

function Map() {    this.elements = new Array(); //得到map的大小    this.size = function() {        return this.elements.length;    } //判断是否为空    this.isEmpty = function() {        return (this.elements.length < 1);    }    //清空    this.clear = function()

js Array Map and Set

Array slice slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array: var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C'] arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G'] Note:slice()的起止参数包括开始索

JS中map()与forEach()的用法

相同点: 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组) 3.匿名函数中的this都是指向window 4.只能遍历数组 不同点: map() map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值 也就是map()进行处理之后返回一个新的数组 ??注意:map()方法不会对空数组进行检测 map方法不会改变原始数组 var arr = [0,2,4,6,8]; var str = arr

JS中map()与forEach()的区别和用法

相同点: 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组) 3.匿名函数中的this都是指向window 4.只能遍历数组 不同点: map() map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值 也就是map()进行处理之后返回一个新的数组 ??注意:map()方法不会对空数组进行检测 map方法不会改变原始数组 var arr = [0,2,4,6,8];var str = arr.