【问题标题】:Retrieve data from firebase realtime database and auto fill into textbox从 firebase 实时数据库中检索数据并自动填充到文本框中
【发布时间】:2019-06-15 12:38:23
【问题描述】:

我想从 firebase 实时数据库中检索数据,并在用户注册后自动填充数据库中的数据。我将用户数据保存在他们的 UID 下,现在我在通过他们的 UID 从数据库中检索数据并通过当前登录用户 uid 自动填充用户时遇到问题。

我的 Firebase 数据库 https://imgur.com/a/BlzFADs

要自动填充的地方 https://imgur.com/a/urvNAFe

我为我的代码尝试了所有可能的解决方案,但我似乎无法让它工作,我在 stackoverflow 上找到的所有解决方案,但它仍然对我不起作用。

我的 JS 文件

 firebase.database().ref('Users/User Information').child(uid).once('value', 
 function(snapshot) {

   document.getElementById('name').value = snapshot.child("Name").val();
 });

我的 HTML 文件

 <td>Name:</td>
 <td>
     <input type="text" id="name" name="name" style="font-size:10pt; width:200px;" placeholder="Enter Name Here" required>
 </td>  

现在我想根据他们的 UID 自动填充当前登录用户的数据。

【问题讨论】:

  • console.log(snapshot.child("Name").val()); 打印什么?
  • 未捕获错误:Reference.child 失败:第一个参数是无效路径 =“[object HTMLInputElement]”。路径必须是非空字符串,并且不能在 Jr (firebase.js:1) 和 e.child (firebase.js: 1) 在 svcschedule.js:76 但如果我删除 .child(uid) 它会打印 null
  • 您的参考路径有一个空格。您是否尝试过更改参考路径?
  • Zunnurain,我检查了我的参考路径,它没有空间

标签: javascript firebase firebase-realtime-database


【解决方案1】:

试试下面的代码:

firebase.database().ref('Users/User Information/'+uid.value).once('value', 
 function(snapshot) {
   document.getElementById('name').value = snapshot.val().Name;
});

或者这个带有箭头功能:

firebase.database().ref('Users/User Information/'+uid.value).once('value', (snapshot) => 
{
  document.getElementById('name').value = snapshot.val().Name;
});

【讨论】:

  • 代码在没有 .child(uid) 的情况下工作,但它在文本框中打印“未定义”。当我有 .child(uid) 时它不起作用
  • 还是不行,我觉得我的授权码有问题
  • 好吧,我发现了问题,我认为 firebase 没有正确得到我的响应,我试图删除 .child(uid) ,并将我的 ref 路径更改为我的数据库路径, .ref('Users/User Information/') ,然后它会正确返回值,但这是用户 A 的静态代码,这意味着如果我登录到用户 B,它仍然显示用户 A 的值但用户 B 实际上是一个登录名。你能提供如何解决这个问题吗?这是代码演示,jsfiddle.net/jyeeyap/fwz7L0g6
  • 会不会和我的数据库规则有些关系?这是我现在的规则 { "rules": { ".read": true, ".write": true } }
  • 仍然没有运气......我仍然遇到这个错误。未捕获的错误:Reference.child 失败:第一个参数是无效路径 =“用户/用户信息/[对象 HTMLInputElement]”。路径必须是非空字符串,并且不能包含“.”、“#”、“$”、“[”或“]”
【解决方案2】:

我通过使用 document.getelementbyID 完成此操作,并将其链接到数据库的子项。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-30
    • 1970-01-01
    • 2019-04-16
    • 2020-12-09
    • 2021-02-06
    • 1970-01-01
    • 2021-09-09
    • 1970-01-01
    相关资源
    最近更新 更多