单击Javascript后，如何从用户列表中获取特定的用户信息？

问题描述

我正在编写一个Firebase迷你聊天Web应用程序，管理员可以在其中与所有已认证的用户私下聊天。

所以我使用了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,disabled
        }
      })

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

然后从前端我调用了云功能，并使用map方法显示了用户。 ?

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，displayName等。

感谢您对我的帮助???

解决方法

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

因此逻辑是：

1. 为每个项目创建一个div元素-document.createElement('div')
2. 将其html设置与您执行的操作类似-div.innerHTML
3. 将其绑定为点击事件-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>