The database

Branch table

  • Id primary key
  • The first level
  • The second level 2
  • Third level 3
  • Fourth level 4
  • At fifth grade 5
  • Status Status (enabled or not)

The form of data returned after processing

Form: The different levels are used as elements in an array, and the next levels are used as elements in the children of the previous level

list:[
       {
           id,
           name:first,
           status,
           children:[
               {
                   id,
                   name:second,
                   status,
                   children:[]}]}]Copy the code

First version code implementation

let list = [];
// Level 1 directory
for(const item of roleList){
    if( item.second === "" ){
       list.push({id:item.id,name:item.first,status:item.status,children: []}}}// Secondary directory
for(const item of roleList){
    if( item.third === ""&&item.second ! = =""){
        list.map((items) = >{
            if(items.name === item.first){
                 items.children.push({id:item.id,name:item.second,status:item.status,children:[]})
            }
            returnitems; }}})// Level 3 directory
for(const item of roleList){
    if( item.fourth === ""&& item.third ! = ="" ){
        list.map((items) = >{
            if(items.name === item.first){
                items.children.map((itemm) = >{
                    if(itemm.name === item.second){
                         itemm.children.push({id:item.id,name:item.third,status:item.status,children:[]})
                    }
                    returnitemm; })}returnitems; }}})//
for(const item of roleList){
    if( item.fifth === ""&& item.fourth ! = ="" ){
        list.map((items) = >{
            if(items.name === item.first){
                items.children.map((itemm) = >{
                    if(itemm.name === item.second){
                        itemm.children.map((iteml) = >{
                            if(iteml.name === item.third){
                                 iteml.children.push({id:item.id,name:item.fourth,status:item.status,children:[]})
                            }
                            returniteml; })}returnitemm; })}returnitems; }}})Copy the code

I hated the first version of the code myself, and it felt like callback hell

Second version code implementation

function deleteObj(item){
    delete item.first;
    delete item.second;
    delete item.third;
    delete item.fourth;
    delete item.fifth;
};
function screen(data){
    let firstList = [];
    let secondeList = [];
    let thirdList = [];
    let fourthList = [];
    let fifthList = [];
    data.forEach((item) = >{
        if(item.second === ""){ firstList.push({... item.dataValues,children: []}); }else if(item.third === ""){ secondeList.push({... item.dataValues,children: []}); }else if(item.fourth === ""){ thirdList.push({... item.dataValues,children: []}); }else if(item.fifth === ""){ fourthList.push({... item.dataValues,children: []}); }else{ fifthList.push({... item.dataValues,children:[]});
        }
    });
    firstList.map((firstItem) = > {
        const f = firstItem.first;
        secondeList.map((secondItem) = > {
            const sf = secondItem.first;
            const s = secondItem.second;
            thirdList.map((thirdItem) = > {
                const tf = thirdItem.first;
                const ts = thirdItem.second;
                const t = thirdItem.third;
                fourthList.map((fourthItem) = > {
                    const ff = fourthItem.first;
                    const fs = fourthItem.second;
                    const ft = fourthItem.third;
                    const fo = fourthItem.fourth;
                    fifthList.map((fifthItem) = > {
                        const fif = fifthItem.first;
                        const fis = fifthItem.second;
                        const fit = fifthItem.third;
                        const fio = fifthItem.fourth;
                        const fi = fifthItem.fifth;
                        if(fif === f&&fis === s&&fit === t&& fio === fo){ fifthItem.name = fi; deleteObj(fifthItem); fourthItem.children.push(fifthItem); }})if(ff === f&&fs ===s&&ft === t){ fourthItem.name = fo; deleteObj(fourthItem); thirdItem.children.push(fourthItem); }})if(tf === f&&ts === s){ thirdItem.name = t; deleteObj(thirdItem); secondItem.children.push(thirdItem); }})if(sf === f){
                secondItem.name = s;
                deleteObj(secondItem);
                firstItem.children.push(secondItem);
            }
        })
        firstItem.name = f;
        deleteObj(firstItem);
        return firstItem
    })
    return firstList;
};
Copy the code

Returned data

If you don’t like the name at the bottom, you can create the name attribute as empty

{
    "retCode": true."resultMsg": null."errorCode": null."data": {
        "time": 34."data": [{"id": 5."status": 0."children": [{"id": 6."status": 0."children": []."name": Assistant to the General Manager
                    },
                    {
                        "id": 7."status": 0."children": []."name": "External expert Consultant"
                    },
                    {
                        "id": 19."status": 0."children": [{"id": 8."status": 0."children": [{"id": 9."status": 0."children": []."name": "Financial Audit Division"
                                    },
                                    {
                                        "id": 10."status": 0."children": []."name": "Engineering Audit Division"
                                    },
                                    {
                                        "id": 11."status": 0."children": []."name": "Bidding Office"}]."name": "Audit department"
                            },
                            {
                                "id": 20."status": 0."children": [{"id": 12."status": 0."children": []."name": "Fund Management Department"
                                    },
                                    {
                                        "id": 13."status": 0."children": []."name": "Financial Management Department"
                                    },
                                    {
                                        "id": 14."status": 0."children": []."name": "General Accounting Department"
                                    },
                                    {
                                        "id": 15."status": 0."children": []."name": "Engineering Accounting Department"
                                    },
                                    {
                                        "id": 16."status": 0."children": []."name": "Industrial Financial Management Office"}]."name": "Finance Center"
                            },
                            {
                                "id": 21."status": 0."children": []."name": "Human Resources"}]."name": "Architecture"}]."name": "General manager"}}}]Copy the code