ASP.NET获取用户关联角色：前端多角色合并展示问题求解

这问题我之前也碰到过，核心就是要先把重复的用户数据分组合并，再渲染就好了。给你一步步拆解解决方案：

1. 先对原始数据进行分组处理 #

首先，你的接口返回的原始数据应该是类似每条记录对应一个用户-角色关系的结构（比如[{userName: 'Ronald', role: 'Admin'}, {userName: 'Ronald', role: 'User'}, ...]）。我们可以用Array.reduce()方法把同一个用户的角色都收集到一起：

// 假设这是你从仓储层获取到的原始数据
const originalUserRoles = [
  { userName: 'Ronald', roleName: 'Admin' },
  { userName: 'Ronald', roleName: 'User' },
  { userName: 'Alice', roleName: 'Editor' },
  { userName: 'Bob', roleName: 'User' }
];

// 按用户名分组，收集对应角色
const groupedData = originalUserRoles.reduce((result, item) => {
  // 如果当前用户还没在结果对象里，初始化一个空数组存角色
  if (!result[item.userName]) {
    result[item.userName] = [];
  }
  // 将当前角色加入到该用户的角色数组中
  result[item.userName].push(item.roleName);
  return result;
}, {});

2. 转换成渲染需要的格式 #

分组后我们得到的是一个以用户名为键、角色数组为值的对象，接下来把它转换成方便渲染的数组结构，同时把角色数组用逗号拼接成字符串：

const formattedUserList = Object.entries(groupedData).map(([userName, roles]) => {
  return {
    name: userName,
    roleStr: roles.join(', ')
  };
});

这时候formattedUserList的结构就变成了：

[
  { name: 'Ronald', roleStr: 'Admin, User' },
  { name: 'Alice', roleStr: 'Editor' },
  { name: 'Bob', roleStr: 'User' }
]

3. 渲染到页面 #

最后用这个格式化后的数组去渲染页面，就不会出现重复的用户条目了：

// 假设你要渲染到id为user-container的DOM元素里
const userContainer = document.getElementById('user-container');
userContainer.innerHTML = ''; // 先清空容器

formattedUserList.forEach(user => {
  const userItem = document.createElement('div');
  userItem.textContent = `${user.name} - ${user.roleStr}`;
  userContainer.appendChild(userItem);
});

注意事项 #

• 记得把代码里的userName、roleName替换成你实际数据中的字段名（比如你的模型里可能是name、role之类的）。
• 如果你的数据量很大，这种分组方式的性能也足够，因为reduce和map都是数组的高效方法。

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