Angular如何循环遍历键名不统一的JSON数据并展示name字段值

1. 业务层逻辑修改（TS文件） #

先定义接收结果的变量，再改造接口请求回调的处理逻辑：

// 组件内提前定义存储name值的数组
nameList: string[] = [];

getAll() {
  this.typeService.getAllType().subscribe(result => {
    this.nameList = Object.values(result)
      // 过滤出非空数组类型的顶层值
      .filter(val => Array.isArray(val) && val.length > 0)
      // 把多维数组合并为一维对象数组
      .flat()
      // 提取name字段，同时过滤无name的异常数据
      .map(item => item?.name)
      .filter(Boolean);
  });
}

2. 视图层渲染（HTML模板） #

直接用Angular内置的*ngFor指令循环展示即可：

<div class="name-list">
  <p *ngFor="let name of nameList">
    {{ name }}
  </p>
</div>

方案说明 #

• 无需提前感知接口返回的顶层键名，Object.values()会自动提取所有顶层属性的取值
• 内置过滤逻辑自动跳过空数组、非数组类型的异常返回值，兼容接口不稳定的场景
• 如果需要同时保留id等其他字段，仅需修改map逻辑，返回完整对象即可，示例：

  // 保留id和name的写法
  .map(item => ({id: item.id, name: item.name}))
  

内容的提问来源于stack exchange，提问作者Herge