使用 2 个相互依赖的不同键进行映射

Question

我有一个数组，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>
                    <%   }} %>

Answer 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>
     <%   }} %>

Answer 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()通过它。

使用 2 个相互依赖的不同键进行映射

Map with 2 different keys which depend on each other

javascript

arrays

foreach

maps