JS將扁平化的數據處理成Tree結構


let jsonData= [
  { id:1,  parentId:0, name:"一級菜單A" },
  { id:2, parentId:0, name:"一級菜單B"},
  { id:3, parentId:0, name:"一級菜單C"},
  { id:4, parentId:1, name:"二級菜單A-A"},
  { id:5, parentId:1, name:"二級菜單A-B"},
  { id:6, parentId:2, name:"二級菜單B-A"},
  { id:7, parentId:4, name:"三級菜單A-A-A"},
  { id:8, parentId:7, name:"四級菜單A-A-A-A"},
  { id:9, parentId:8, name:"五級菜單A-A-A-A-A"},
];
將上述扁平化數據轉化成樹形結構
function formatTree(obj){
  let copyedObj = JSON.parse(JSON.stringify(obj)) //深拷貝源數據
  return copyedObj.filter(parent=>{
    let findChildren = copyedObj.filter(child=>{
      return parent.id === child.parentId
    })
    findChildren.length>0 ? parent.children = findChildren : parent.children = []
    return parent.parentId == 0 //返回頂層,依據實際情況判斷這里的返回值
  })
}
}
console.log(JSON.stringify(formatTree(jsonData),null,3))
[
  {
    "id": 1,
    "parentId": 0,
    "name": "一級菜單A",
    "children": [{
      "id": 4,
      "parentId": 1,
      "name": "二級菜單A-A",
      "children": [{
        "id": 7,
        "parentId": 4,
        "name": "三級菜單A-A-A",
        "children": [{
          "id": 8,
          "parentId": 7,
          "name": "四級菜單A-A-A-A",
          "children": [{
            "id": 9,
            "parentId": 8,
            "name": "五級菜單A-A-A-A-A",
            "children": []
          }]
        }]
      }]
    },
    {
      "id": 5,
      "parentId": 1,
      "name": "二級菜單A-B",
      "children": []
    }]
  },
  {
    "id": 2,
    "parentId": 0,
    "name": "一級菜單B",
    "children": [{
      "id": 6,
      "parentId": 2,
      "name": "二級菜單B-A",
      "children": []
    }]
  },
  {
    "id": 3,
    "parentId": 0,
    "name": "一級菜單C",
    "children": []
  }
]

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM