如何在Angular 2中用TypeScript遍历嵌套对象并提取数据

首先得提个小细节：你目标格式里的重复rolename属性是不符合JS/TS对象规则的——对象中重复的键会被后面的覆盖，所以咱们得调整成数组存储多个角色名或者用逗号分隔的字符串，这两种方式才是合理的。

接下来看看怎么实现你要的效果，把每个用户对应的所有角色名和基础用户信息整合到同一个对象里：

方案1：生成包含角色名数组的新数据数组 #

如果希望保留每个角色名的独立性，用数组存储最合适，代码如下：

// 假设apiResponse是你从API获取的原始JSON数组
const transformedUsers = apiResponse.map(user => {
  // 提取当前用户的所有角色名
  const roleNames = user.userroles.map(userRole => userRole.role.rolename);
  
  return {
    userid: user.userid,
    tenantid: user.tenantid,
    username: user.username, // 可选，根据需要添加其他字段
    rolenames: roleNames // 用数组存储多个角色名
  };
});

这段代码的逻辑很清晰：

1. 用map遍历原始用户数组，为每个用户生成新对象
2. 对每个用户的userroles数组再次用map，提取每个角色的rolename
3. 把基础用户信息和角色名数组组合成新对象

转换后的数据格式会是这样（符合规范）：

[
  {
    "userid":"f8b7b393-b36d-412b-82f7-9500e9eb6924",
    "tenantid":"7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c",
    "username":"testuser3",
    "rolenames": ["Installer", "Operator"]
  },
  // 其他用户数据...
]

方案2：结合你的UserModel模型，生成模型数组 #

如果你需要把数据映射到你定义的UserModel中，可以这样做（利用模型里的userrolestext字段存储角色名字符串）：

import { UserModel } from './path-to-your-model';

// 原始API数据
const apiUsers = /* 你的API返回数据 */;

const userModels: UserModel[] = apiUsers.map(apiUser => {
  const user = new UserModel();
  // 复制基础用户字段
  user.userid = apiUser.userid;
  user.tenantid = apiUser.tenantid;
  user.username = apiUser.username;
  user.emailaddress = apiUser.emailaddress;
  user.isallowed = apiUser.isallowed;
  
  // 把角色名拼接成逗号分隔的字符串，赋值给userrolestext
  user.userrolestext = apiUser.userroles.map(ur => ur.role.rolename).join(', ');
  
  return user;
});

为什么你之前的forEach没推进？ #

forEach只是用来遍历数组执行操作，但不会返回新的数组。而我们需要的是转换数组生成新数据，所以map方法更适合这个场景——它会遍历数组并返回一个新数组，每个元素都是转换后的结果。

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