Javascript 从动态数组值中筛选数据，并将结构格式作为角度输出

我得到的动态值是这样的数组格式

var sections = [
    { id: "1", section: "I", group: "Section1"},
    { id: "2", section: "I", group: "Section1"},
    { id: "3", section: "I", group: "Section2"},
    { id: "4", section: "I", group: "Section2"},
    { id: "5", section: "II", group: "Section3"},
    { id: "6", section: "III", group: "Section4"},
    { id: "7", section: "IV", group: "Section5"}
];

输出应为树结构格式，如下所示

我 |---第一节 |---第2节

二, |--第三节

三, |--第四节

四, |---第五节

---

如何做到这一点，我正在从Rest API获取值，我正在使用Angular 8版本，我们如何在javascript/typescript中实现此过滤器？要求并不完全清楚（特别是关于副本），但这里有一个解决方案：

var sections = [
    { id: "1", section: "I", group: "Section1"},
    { id: "2", section: "I", group: "Section1"},
    { id: "3", section: "I", group: "Section2"},
    { id: "4", section: "I", group: "Section2"},
    { id: "5", section: "II", group: "Section3"},
    { id: "6", section: "III", group: "Section4"},
    { id: "7", section: "IV", group: "Section5"}
];

var groupBy = (arr, key) => {
  return arr.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

var removeDuplicates = (arr) => {
return arr.filter((t,i,s) => i === s.findIndex((_t) => ( _t.group === t.group && _t.section === t.section)) )
}

let resultString = "";

let groupedSections = groupBy(sections, "section")

Object.keys(groupedSections).forEach( key => {
  resultString += key + " |--- " + removeDuplicates(groupedSections[key]).map(s=> s.group).join(" |--- ")  + "\n" 
})

console.log(resultString)

请注意，可能有更高效/干净的方法，但这很好

大部分工作只是找到合适的StackOverflow岗位：

将数组按节分组

筛选重复项

---

下次尝试分解你的问题，搜索已经存在的问题，你会发现你可以通过搜索和分解内容来解决很多问题：）

你能添加到目前为止你已经尝试过的东西吗？