使用 2 个相互依赖的不同键映射答案

【问题标题】：Map with 2 different keys which depend on each other使用 2 个相互依赖的不同键映射
【发布时间】：2021-12-30 00:36:29
【问题描述】：

我有一个数组 project.users。在这我有不同的用户定义的东西。现在我为每个用户名创建一个<p> 元素。（多个只显示一次）。哪个正在工作。 Project.users 可以多次列出同一个用户，但每次都分配不同的角色。

我想要的：每个用户名只显示一次，定义如下，并在 div 的标题属性中显示其关联的 user.role。如果用户名存在多次（user.given_name and user.family_name 相同），它也应该只显示一次用户名，但是（在这种情况下 user.role 总是不同）应该将两个角色作为标题放在 div 中。

示例：用户名存在一次：

用户名存在两次：

                         <% if (Array.isArray(project.users)) {
                             let usernames = project.users.map((user) => user.given_name + " " + user.family_name);
                             console.log(project.users);
                             for (username of new Set(usernames)) { %>
                                <div title="Here Comes The user.role">
                                 <p class="home_projectdata_content"><%= username %></p>
                                </div>
                    <%   }} %>

【问题讨论】：

标签： javascript arrays foreach maps

【解决方案1】：

因此，在这种情况下，您可以创建一个具有与键（用户名）关联的所有角色的对象。

你可以在<p>标签下面循环使用roles[username]

           <% if (Array.isArray(project.users)) {
            let usernames = project.users.map((user) => user.given_name + " " + user.family_name);
            const roles = {};
            project.users.forEach((user) => {
                const username = user.given_name + " " + user.family_name;
                if (!roles[username]) roles[username] = [];
                roles[username].push( user.role);
            })

             console.log(project.users);
             for (username of new Set(usernames)) { %>
                <div title="Here Comes The user.role">
                  <p class="home_projectdata_content"><%= username %></p>
                  <% for(role of roles[username]) { %>
                     <span><%= role %></span>
                  <%  } %>
                </div>
     <%   }} %>

【讨论】：

【解决方案2】：

首先，我不确定您拥有的数据源对象是什么（您的完整 JSON 对象或数组数据是什么样的）。但是，您需要在呈现 UI 之前集中数据源并对其进行转换。

例如，您可能有以下项目对象：

const projects = {
  users: [
    {
      id: 1,
      firstname: 'Ben',
      lastname: 'Truong',
      roles: {
        moderator: true,
        admin: true,
      }
    },
    {
      id: 2,
      firstname: 'Ana',
      lastname: 'Sarapova',
      roles: {
        moderator: true,
      }
    },
    {
      id: 3,
      firstname: 'Carlos',
      lastname: 'Hank',
      roles: {
        moderator: true,
      }
    },
  ]
};

const userInfo = [];

for (element of projects.users) {
//   console.log(element.roles);
  userInfo.push({
  id: element.id,
  fullName: element.firstname + ' ' + element.lastname,
  userRoles: Object.keys(element.roles).toString(),
  });
}; 

console.log(userInfo)

输出看起来像

[[object Object] {
  fullName: "Ben Truong",
  id: 1,
  userRoles: "moderator,admin"
}, [object Object] {
  fullName: "Ana Sarapova",
  id: 2,
  userRoles: "moderator"
}, [object Object] {
  fullName: "Carlos Hank",
  id: 3,
  userRoles: "moderator"
}]

最后，你可以根据需要通过它 map()。

【讨论】：