Angular：HTTP客户端转换树状数据结构

Question

我从服务器得到以下结构（适当的JSON结构）

Orga1
| + Department1
| |  + Role1
| |  + Role2
| + Department2
| |  + Role10
| |  + Role11
Orga 2
| + DepartmentAB
| |  + RoleAB1
...

我想在Angular中有一个对象

export interface Organization {
  name: string;
  lstDeparments: Department [];
}
export interface Department {
  name: string;
  lstRoles: string [];
}

但不知怎的，我没有真正的线索如何在Angular中设置匹配的接口。因为属性name是动态变化的（例如Orga1，Orga2），并且属性列表也需要与内容动态地填充。

任何想法如何正确设置interface？ （有自动转换）

Answer 1

您有这种数据结构的特定语法：

interface Payload {
  [key: string]: Orga;
}

interface Orga {
  [key: string]: Department;
}

interface Department {
  [key: string]: Role;
}

如果你想要Orgas列表，你必须迭代一个对象，而不是数组。

您可以使用Object.keys或更新的浏览器（或者如果您有polyfill），Object.entries：

const orgas = Object.keys(payload).map(key => payload[key]);
const orgas = Object.entries(payload).map(([key, value]) => value);

您也可以通过generation function使用Symbol.iterator迭代您的对象，但我认为这有点过分：

const payload = {
  orga1: { name: 'orga 1' },
  orga2: { name: 'orga 2' },
  [Symbol.iterator]: function *() {
    for (const key of Object.keys(this)) {
      yield this[key];
    }
  }
};

for (const value of payload) {
  console.log(value);
}