Today began to record some of their own often encountered data processing skills and project ideas, the span of a long project later forget what they have done or how to do, in case of need ✊

preface

Now that the front-end page is dominated by data-driven views, we often find that the requested data is just a flat array, and when we render the structure, we find that direct rendering does not work, so we need some small algorithms.

Flat array rotationTree

Suppose the array returned by the back end is this tiled array of departments

Const data = [{id: "01," name: "zhang greatly", pid: ", "job:" project manager "}, {id: "02," name: "little light", pid: "01", the job: "Product leader"}, {id: "7", name: "small beautiful", pid: "02" job: "product manager"}, {id: "08," name: "light", pid: "02", the job: "Product manager"}, {id: "03," name: "little beauty," pid: "01," job: "UIleader"}, {id: "09," name: "gao", pid: "3", the job: "UI designers"}, {id: "04" name: "horse", pid: "01," job: "technology leader"}, {id: "05," name: "wang", pid: "01", the job: "Test leader"}, {id: "6", the name: "li", pid: "01," job: "operational leader"}, {id: "ten," name: "liu", pid: "04", the job: "Front-end engineer"}, {id: "11", the name: "wah", pid: "04" job: "back-end engineer"}, {id: "12", name: "xiao li", pid: "04" job: "back-end engineer"}, {id: "13", name: "Xiao zhao", pid, "5", the job: "test engineer"}, {id: "14", the name: "small strong", pid: "05," job: "test engineer"}, {id: "15," name: "small tao", the pid: "6", the job: "Operation engineer "}]Copy the code

The id of the department boss is the same as the PID of each member. We expect to generate an array structure as follows:

[{label: 'a' greatly, children: [{label: 'small bright, children: [{label:' xiao li '}, {label: 'great light'}]}, {label: 'the little beauty', the children: / {label: 'gao'}}, {label: 'old', children: [{label: 'liu'}, {label: "wah"}, {label: 'xiao li'}]}, {label: 'Lao wang' children: [{label: 'xiao zhao'}, {label: 'small strong'}]}, {label: 'li', children: [] {label: 'small tao'}}]}]Copy the code

Method 1: filter, directly on the code

function tranData2Tree(data) { const treeData = [] data.forEach(item => { if (! Item. Pid) {/ / here to short-circuit calculation and | | item. The top pid = = = pid treeData. Push (item) / / obj. Pid = = = false to find top} / / select the obj id with other obj Const resArr = data.filter(data => item.id === data.pid) if (! ResArr. Length) return Item. children = resArr}) return treeData}Copy the code

Method two: recursion

Function tranData2Tree(data, rootValue) {// rootValue = pid, ForEach (item => {if (item.pid === rootValue) {const treeData = [] data.foreach (item => {if (item.pid === rootValue) {const treeData = [] data.foreach (item => {if (item.pid === rootValue) { Const children = tranData2Tree(data, item.id) if (children.length) { item.children = children } treeData.push(item) } }) return treeData }Copy the code

conclusion

Did not consider the problem of performance respect, write bad, have wrong place bother to ask each big guy much to give advice, Thanksgiving family Thanksgiving 🙏

🚩 WISH you a pleasant journey and meet at the summit