0
180
ViewsMapa con 2 claves diferentes que dependen una de la otra
Tengo una matriz, project.users. En esto tengo diferentes cosas del usuario definido. Ahora creo un elemento <p> para cada uno de los nombres de usuario. (Múltiples mostrando solo una vez). Que está funcionando. Project.users puede tener el mismo usuario en la lista varias veces, pero cada vez con un rol diferente asignado.
Lo que quiero: mostrar cada nombre de usuario solo una vez, como se define a continuación, y mostrar su rol de usuario asociado en el atributo de título del div. Si el nombre de usuario existe varias veces ( user.given_name and user.family_name iguales), también debería mostrar el nombre de usuario solo una vez, pero (user.role siempre diferente en este caso) debería poner ambos roles como título en el div.
Ejemplo: nombre de usuario existente una vez:
nombre de usuario existente dos veces:
<% 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> <% }} %>2 answers
Answer question0
Entonces, puede crear un objeto que tenga todos los roles asociados a la clave (nombre de usuario) en este caso.
Y puede hacer un bucle debajo de la etiqueta <p> con 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> <% }} %>0
En primer lugar, no estoy seguro de cuál es el objeto de origen de datos que tiene (cómo es su objeto JSON completo o su matriz de datos). Sin embargo, la idea es que necesita centralizar la fuente de datos y transformarla antes de representar la interfaz de usuario.
Por ejemplo, es posible que tenga un objeto de proyectos como el siguiente:
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)y la salida parece
[[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" }]Finalmente, puede mapear() a través de él como desee.