首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >创建层次结构-JavaScript的树结构

创建层次结构-JavaScript的树结构
EN

Stack Overflow用户
提问于 2022-09-21 17:38:53
回答 1查看 230关注 0票数 -2

我需要帮助创建一个显示层次结构的树结构,我有一个工作代码,但我的问题是格式化要显示的数据,因为数据来自两个不同的数组变量。

这应该对输出进行格式化。

Interns

  • Terry Cats -首席创意官:执行总裁
    • Nick Thompson -设计主管:
      • Nick Jenson -实习生

  • Bruce首席战略官:执行官
    • David Smith -发展主管: Jones -市场部主管: Operations

  • Bill Bass -首席执行官:执行

这是我的密码。

代码语言: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" :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" :6, 
        "name" : "Terry", 
        "surname" : "Cats", 
        "slug": "terry-cats",
        "category" : "c-suite",
        "title": "Chief Creative Officer",
        "reportsTo": "" 
    },
    { 
        "_id" :7, 
        "name" : "Bruce", 
        "surname" : "Davids", 
        "slug": "bruce-davids",
        "category" : "c-suite",
        "title": "Chief Strategy Officer",
        "reportsTo": "" 
    },
    { 
        "_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;

};
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-21 18:04:22

Build tree array from flat array in javascript改编而来,这里有一个函数,可以从一个节点列表和它们的父节点列表中构建一个树。

作为<UL>函数的Tree structure in Javascript打印树

代码语言: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: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:6,name:"Terry",surname:"Cats",slug:"terry-cats",category:"c-suite",title:"Chief Creative Officer",reportsTo:""},{_id:7,name:"Bruce",surname:"Davids",slug:"bruce-davids",category:"c-suite",title:"Chief Strategy Officer",reportsTo:""},{_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"},];

function unflatten(arr) {
  var tree = []

  var grouped = arr.reduce(function(agg, item) {
    agg[item.slug] = item;
    agg[item.slug].children = []
    return agg;
  }, {})

  Object.keys(grouped).forEach(function(key) {
    var value = grouped[key];
    if (value.reportsTo && grouped[value.reportsTo]) {
      grouped[value.reportsTo].children.push(value);
    } else {
      tree.push(value);
    }
  })

  return tree;
}

function print_list(list, ul) {
  for (var i = 0; i < list.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = list[i].name + " " + list[i].surname + " - " + list[i].title;
    // adding category
    li.innerHTML += ": " + categories.find(item => item.slug == list[i].category).name

    if (list[i].children.length > 0) {
      var sub_list = document.createElement('ul');
      li.appendChild(sub_list);
      print_list(list[i].children, sub_list);
    }
    ul.appendChild(li);
  }
}

var result = unflatten(staffMembers)
print_list(result, document.getElementById('list'));
代码语言:javascript
复制
<ul id="list"></ul>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73804903

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档