js遞歸實現數組轉化樹狀結構

最近做一個後臺管理系統,左邊數據需要從數據庫獲取,獲取出來是一個一維數組,因此需要轉化成樹狀結構,寫了一個遞歸實現數據轉化,代碼如下:

      function filterArray(data, parent) {
                let vm = this;
                var tree = [];
                var temp;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].parent == parent) {
                        var obj = data[i];
                        temp = filterArray(data, data[i].id);
                        if (temp.length > 0) {
                            obj.subs = temp;
                        }
                        tree.push(obj);
                    }
                }
                return tree;
            },

引用數組如下

          var list =[{
                        "id": 43,
                        "menu_name": "測試任務",
                        "menu_href": "6",
                        "menu_icon": "el-icon-lx-edit",
                        "tree_sort": 600,
                        "tree_level": 1,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": null
                    },
                    {
                        "id": 44,
                        "menu_name": "待領樣",
                        "menu_href": "waitGetSamples",
                        "menu_icon": "",
                        "tree_sort": 610,
                        "tree_level": 2,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 43
                    },
                    {
                        "id": 45,
                        "menu_name": "待測試",
                        "menu_href": "waitTest",
                        "menu_icon": "",
                        "tree_sort": 620,
                        "tree_level": 2,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 43
                    },
                    {
                        "id": 46,
                        "menu_name": "測試中",
                        "menu_href": "testInProcess",
                        "menu_icon": "",
                        "tree_sort": 630,
                        "tree_level": 2,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 43
                    },
                    {
                        "id": 47,
                        "menu_name": "數據審覈",
                        "menu_href": "7",
                        "menu_icon": "el-icon-lx-punch",
                        "tree_sort": 700,
                        "tree_level": 1,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": null
                    },
                    {
                        "id": 48,
                        "menu_name": "數據審理",
                        "menu_href": "dataAuditing",
                        "menu_icon": "",
                        "tree_sort": 710,
                        "tree_level": 2,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 47
                    },
                    {
                        "id": 49,
                        "menu_name": "異常處理",
                        "menu_href": "exceptionHandling",
                        "menu_icon": "",
                        "tree_sort": 720,
                        "tree_level": 2,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 47
                    },
                    {
                        "id": 50,
                        "menu_name": "樣品異常",
                        "menu_href": "SamplesAbnormal",
                        "menu_icon": "",
                        "tree_sort": 721,
                        "tree_level": 3,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 49
                    },
                    {
                        "id": 51,
                        "menu_name": "測試數據異常",
                        "menu_href": "testDataException",
                        "menu_icon": "",
                        "tree_sort": 722,
                        "tree_level": 3,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 49
                    },
                    {
                        "id": 52,
                        "menu_name": "設備異常處理",
                        "menu_href": "deviceExceptionHandling",
                        "menu_icon": "",
                        "tree_sort": 723,
                        "tree_level": 3,
                        "is_show": 1,
                        "status": 0,
                        "remarks": "",
                        "parent": 49
                    }
                ]

使用方法:

    console.log(filterArray(list))

 打印結果

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章