Question

用户登录其帐户后，将询问他/她的用户角色。

IMG 1：询问用户角色

选择角色后，它将被保存在数据库中，

IMG 2：已保存的用户角色

那么，我们如何从Firebase数据库中检索特定数据，然后将其打印为HTML？

IMG 3：显示用户角色

这些是我在.js文件中使用的代码

function app(user){

  function updateMyStatus(e){
    var myUpdate={};
    myUpdate.email = user.email;
    myUpdate.displayName = user.displayName;
    myUpdate.status = document.getElementById("clientStatus").value;
    fb.child(user.uid).set(myUpdate);
  }
  function receiveUpdate(received){
    var data = received.val();
    console.log( data );
    document.getElementById('role').innerHTML= "";
  }
  document.getElementById('userName').innerHTML = user.displayName;
  var fb = firebase.database().ref('Accounts');

  document.getElementById("clientStatus")
    .addEventListener("input",updateMyStatus);
}

并且如果用户已经具有如图2所示的用户角色（状态），您如何隐藏如图1所示的Dropbox？

Answer 1

以下内容将从Firebase取回该帐户的数据。然后只需将值设置为其各自的HTML元素即可。

fb.child(AccountId).on(‘value’, callbackFunction)

以供参考：https://firebase.google.com/docs/database/web/read-and-write

Answer 2

function receiveUpdate(received){
    var data = received.val();
    console.log( data );
    document.getElementById('role').innerHTML= "";
    //hide the dropdown box 
    document.getElementById("clientStatus").style.display = "none";
}
document.getElementById("clientStatus").addEventListener("input",updateMyStatus);
//put this under your other event listener
fb.child('Accounts').on(‘value’, receiveUpdate);

此代码无法按书面要求运行。希望这对您有所帮助。

Answer 3

根据您当前的代码，以及我对Firebase Realtime数据库的理解，您需要采取以下步骤：

注册一个侦听器以侦听数据库更改
更具体地说，您需要向数据库中您感兴趣的特定字段添加一个侦听器。
此监听器最好不要在任何函数中。
此侦听器将检查您的用户在数据库中是否存在角色。
1. 如果是，请隐藏输入字段并显示用户的详细信息。
2. 否则，同时显示输入字段和用户的详细信息。

由于我没有使用实时数据库的经验（我以前仅使用Cloud Firestore），因此我对其语法不太熟悉。但是@Andre Kool和@thezachcannon在上一篇文章中建议的link包含将侦听器添加到特定数据库引用的示例。

希望有帮助。

如何在Firebase数据库中检索特定数据？

3 个答案: