如何从Javascript中点击的用户列表中获取具体的用户信息？

Question

我正在编写一个 firebase 迷你聊天网络应用程序，管理员可以在其中与所有经过身份验证的用户私下聊天。

所以我使用 firebase 云函数来获取所有用户的列表，代码：

//LISTING USERS FOR ADMIN
exports.listUsers = functions.https.onCall((data, context) => {
  // check if user is admin (true "admin" custom claim), return error if not
  const isAdmin = context.auth.token.admin === true
  if (!isAdmin) {
    return {
      error: `Unauthorized.`
    }
  }

  return admin.auth().listUsers().then((listUsersResult) => {
      // go through users array, and deconstruct user objects down to required fields
      const result = listUsersResult.users.map((user) => {
        const {
          uid,
          email,
          photoURL,
          displayName,
          disabled
        } = user
        return {
          uid,
          email,
          photoURL,
          displayName,
          disabled
        }
      })

      return {
        result
      }
    })
    .catch((error) => {
      return {
        error: 'Error listing users'
      }
    })
})

我从前端调用了云函数并使用地图方法显示用户。

const listUsers = functions.httpsCallable('listUsers');
listUsers().then(res => {
  const result = res.data.result;

  const output = result.map(item => {
    return `<div class="user">
              <img src="${item.photoURL}" /> 
              <p class="username">${item.displayName}</p>
            </div>`
  });

  listChats.innerHTML = output.join('');
})

用户已成功列出。我现在的问题是，如果管理员单击特定用户，我可以获取或获取该特定用户信息，例如 ID、显示名称等。

谢谢你帮助我

Answer 1

您只能在 DOM 元素上绑定 click 事件。即使您使用 innerHTML 添加元素，也有一些方法可以做到这一点。但为简单起见，我建议您不要使用 innerHTML 添加元素，而是使用 document.createElement 添加元素，其中 returns 是 DOM 元素。

所以逻辑是：

为每个项目创建一个 div 元素 - document.createElement('div')
将其 html 设置为类似于您所做的 - div.innerHTML
绑定点击事件 - div.addEventListener('click', ..)

这样，您就可以将项目本身置于 addEventListener 回调的范围内。这就是 alert 起作用的原因。

function listUsers() {
  return Promise.resolve({
    data: {
      result: [
        {
          photoURL: 'https://www.w3schools.com/howto/img_avatar.png',
          displayName: 'john'
        }
      ]
    }
  })
}

listUsers().then(res => {
  const result = res.data.result;

  result.forEach(item => {
    const div = document.createElement('div');
    div.classList.add('user');
    div.innerHTML = `
      <img src="${item.photoURL}" /> 
      <p class="username">${item.displayName}</p>
    `;
    div.addEventListener('click', () => {
      alert(JSON.stringify(item, null, 2));
    });
    listChats.appendChild(div);
  });

  listChats.innerHTML =  output.join('');
})

<div id="listChats"></div>

如何从Javascript中点击的用户列表中获取具体的用户信息？

How can I get the specific user information from the list of users upon click in Javascript?

javascript

dom

dom-manipulation