Javascript 根据属性映射要创建嵌套ul的对象数组

我想将这些数据安排在

ul

结构上，根据它们的

等级进行嵌套

const staff = [
  {
    Rank: 1,
    ID: '1',
    Role: 'Managing Director',
    Name: 'Peter'
  },
  {
    Rank: 2,
    ID: '2',
    Role: 'Operations Director',
    Name: 'Jane'
  },
  {
    Rank: 2,
    ID: '3',
    EmployeeImage: '',
    Role: 'Head of Client Services',
    Name: 'John',
  },
  {
    Rank: 3,
    ID: '4',
    EmployeeImage: '',
    Role: 'Senior Developer',
    Name: 'Tom',
  }
]

期望输出

<div>
  <h2>Managing Director</h2>
  <ul>
    <li>
      <h2>Operations Director</div>
      <ul>
        <li>
          <h2>Senior Developer</h2>
        </li>
      </ul>
    </li>
    <li>
      <h2>Head of Client Services</h2>
    </li>
  </ul>
</div>


总经理


作战指挥官


高级开发人员




客户服务主管




我试图用JSX做很多条件，但我没有取得任何进展，而且变得非常混乱，这种方法是正确的方向还是有更好的方法来实现这一点

谢谢。
您首先需要创建一个基于树的结构，以镜像所需的HTML。一个选择是瞄准像这样的目标

{
  people: ['Managing Director'],
  children: {
    people: ['Operations Director', 'Head of Client Services'],
    children: {
      people: ['Senior Developer']
    }
  }
}

这可以通过


const staff=[
{
排名：1，
ID:'1'，
角色：“常务董事”，
名字：“彼得”
},
{
排名：2，
ID:'2'，
角色：“运营总监”，
姓名：“简”
},
{
排名：2，
ID:'3'，
雇员形象：''，
角色：“客户服务负责人”，
姓名：'约翰'，
},
{
排名：3，
ID:'4'，
雇员形象：''，
角色：“高级开发人员”，
名字：“汤姆”，
}
];
const peopleByRank={}；
工作人员（职位、职务）{
（peopleByRank[排名]？？=[]）。推送（角色）；
}
常量树=对象值（peopleByRank）
.reduceRight（（儿童、人）=>（{
儿童：儿童？儿童？儿童：{人：儿童}，
人民}）；
控制台日志（树）首先需要创建一个基于树的结构，以镜像所需的HTML。一个选择是瞄准像这样的目标

{
  people: ['Managing Director'],
  children: {
    people: ['Operations Director', 'Head of Client Services'],
    children: {
      people: ['Senior Developer']
    }
  }
}

这可以通过


const staff=[
{
排名：1，
ID:'1'，
角色：“常务董事”，
名字：“彼得”
},
{
排名：2，
ID:'2'，
角色：“运营总监”，
姓名：“简”
},
{
排名：2，
ID:'3'，
雇员形象：''，
角色：“客户服务负责人”，
姓名：'约翰'，
},
{
排名：3，
ID:'4'，
雇员形象：''，
角色：“高级开发人员”，
名字：“汤姆”，
}
];
const peopleByRank={}；
工作人员（职位、职务）{
（peopleByRank[排名]？？=[]）。推送（角色）；
}
常量树=对象值（peopleByRank）
.reduceRight（（儿童、人）=>（{
儿童：儿童？儿童？儿童：{人：儿童}，
人民}）；
控制台日志（树）哇，谢谢，我需要了解一下这一点，以及如何将其放在TypeScriptOops上，你是对的，需要在返回的列表周围额外添加一个
仍然
ul
应该在其父
li
中，而不是有自己的
li
，这将使它成为它的“父母”的兄弟姐妹。这是我的错，我弄错了结构。我已经更正了所需的输出。所以您只需要一个与每个
关联的
？你可以这样做，但如果只是为了嵌套缩进，你可能会发现使用CSS和常规容器（如带有类的
s）这样做更合适。哇，谢谢，我需要了解一下这一点，以及如何将其放在TypeScriptOops上，你是对的，在返回的列表周围需要一个额外的
仍然
ul
应该在它的父
li
中，没有自己的
li
，这将使它成为其“父”的兄弟。这是我的错，我做了错误的结构。我已经更正了所需的输出。所以您只需要一个与每个
关联的
？您可以这样做，但如果只是为了嵌套缩进，您可能会发现使用CSS和常规容器（如带有类的
s）这样做更合适