創建樹結構層次結構 - JavaScript

Question

我需要幫助創建一個顯示層次結構的樹結構，我有一個工作代碼，但我的問題是格式化要顯示的數據，因為數據來自 2 個不同的 arrays 變量。

這應該如何格式化 output。

• Terry Cats - 首席創意官：執行官
  • Nick Thompson - 設計主管：運營
    • Nick Jenson - 實習生設計師：實習生
• Bruce Davids - 首席戰略官：執行官
  • David Smith - 開發主管：運營
  • John Jones - 營銷主管：運營
• Bill Bass - 首席執行官：執行官

這是我的代碼。

const staffMembers = [
    { 
        "_id" :0, 
        "name" : "David", 
        "surname" : "Smith", 
        "slug": "david-smith",
        "category" : "operations",
        "title": "Head of Development",
        "reportsTo": "bruce-davids"
    },
    { 
        "_id" :1, 
        "name" : "John", 
        "surname" : "Jones", 
        "slug": "john-jones",
        "category" : "operations",
        "title": "Head of Marketing",
        "reportsTo": "bruce-davids"
    },
    { 
        "_id" :2, 
        "name" : "Jane", 
        "surname" : "Sampson", 
        "slug": "jane-sampson",
        "category" : "operations",
        "title": "Head of Content",
        "reportsTo": "bruce-davids"
    },
    { 
        "_id" :3, 
        "name" : "Nick", 
        "surname" : "Thompson", 
        "slug": "nick-thompson",
        "category" : "operations",
        "title": "Head of Design",
        "reportsTo": "terry-cats"
    },
    { 
        "_id" :4, 
        "name" : "Nick", 
        "surname" : "Jenson", 
        "slug": "nick-jenson",
        "category" : "interns",
        "title": "Intern designer",
        "reportsTo": "nick-thompson" 
    },
    { 
        "_id" :8, 
        "name" : "Bill", 
        "surname" : "Bass", 
        "slug": "bill-bass",
        "category" : "c-suite",
        "title": "Chief Executive Officer",
        "reportsTo": "" 
    }
]

const categories = [
    { 
        "_id" :0, 
        "name" : "Executive", 
        "parent" : "", 
        "slug" : "c-suite" 
    },
    { 
        "_id" :1, 
        "name" : "Operations", 
        "parent" : "c-suite", 
        "slug" : "operations" 
    },
    { 
        "_id" :2, 
        "name" : "Interns", 
        "parent" : "operations", 
        "slug" : "interns" 
    },
];

const hierarchy = (data) => {
    const tree = [];
    const childOf = {};
    let results = [];
        let cat = "";
        let childrens = [];
    data.forEach((item,index) => {
        const { slug, reportsTo, category } = item;
        // console.log(category);
        childOf[slug] = childOf[slug] || [];
        item.children = childOf[slug];
        reportsTo ? (childOf[reportsTo] = childOf[reportsTo] || []).push(item) : tree.push(item);
        // if(category == categories.slug ){
            cat = category;
            const indexs = categories.findIndex(object => {
                return object._id;
            });
        // }
        });
  
  for(let i = 0;i < tree.length;i++){
    for(let j = 0;j < tree[i].children.length;j++){

        childrens = (tree[i].children[j]);
    }
    results.push(tree[i].name + " " + tree[i].surname + " - " + tree[i].title +": " 
    + cat + '*' + childrens.name + " " + childrens.surname + " - " + childrens.title + ": " + "cat"+cat);
  }
    return results;

};

Answer 1

改編自Build tree array from flat array in javascript ，這里有一個 function ，用於從具有父節點的節點列表中構建樹。

將樹打印為<UL> function 取自 Javascript 中的樹結構

 const staffMembers=[{_id:0,name:"David",surname:"Smith",slug:"david-smith",category:"operations",title:"Head of Development",reportsTo:"bruce-davids"},{_id:1,name:"John",surname:"Jones",slug:"john-jones",category:"operations",title:"Head of Marketing",reportsTo:"bruce-davids"},{_id:2,name:"Jane",surname:"Sampson",slug:"jane-sampson",category:"operations",title:"Head of Content",reportsTo:"bruce-davids"},{_id:3,name:"Nick",surname:"Thompson",slug:"nick-thompson",category:"operations",title:"Head of Design",reportsTo:"terry-cats"},{_id:4,name:"Nick",surname:"Jenson",slug:"nick-jenson",category:"interns",title:"Intern designer",reportsTo:"nick-thompson"},{_id:8,name:"Bill",surname:"Bass",slug:"bill-bass",category:"c-suite",title:"Chief Executive Officer",reportsTo:""}]; function unflatten(arr) { var tree = [], mappedArr = {}, arrElem, mappedElem; for (var i = 0, len = arr.length; i < len; i++) { arrElem = arr[i]; mappedArr[arrElem.slug] = arrElem; mappedArr[arrElem.slug]['children'] = []; } for (var id in mappedArr) { if (mappedArr.hasOwnProperty(id)) { mappedElem = mappedArr[id]; if (mappedElem.reportsTo && mappedArr[mappedElem['reportsTo']]) { mappedArr[mappedElem['reportsTo']]['children'].push(mappedElem); } else { tree.push(mappedElem); } } } return tree; } var result = unflatten(staffMembers) // console.log(result) function print_list(list, container) { for (var i = 0; i < list.length; i++) { var li = document.createElement('li'); li.innerHTML = list[i].name + " " + list[i].surname + " - " + list[i].title; if (list[i].children.length > 0) { var ul = document.createElement('ul'); li.appendChild(ul); print_list(list[i].children, ul); } container.appendChild(li); } } print_list(result, document.getElementById('list'));

 .as-console-wrapper { max-height: 100% !important }

 <ul id="list"></ul>