从Firebase数据库中检索数据

时间:2017-01-11 01:29:01

标签: javascript html firebase firebase-realtime-database

我是Firebase的新手,我已将数据保存在Firebase数据库中,但我无法检索它并显示在表格中。我的代码如下。任何帮助将不胜感激。

以下是firebase数据库的图像:

Firebase DB

使用Javascript:

/*jslint plusplus: true*/
var rootRef = firebase.database().ref().child("users");

rootRef.on("child_added", snap => {

var medname = snap.child("MedName").val();
var end = snap.child("End").val();
var start = snap.child("Start").val();
var type = snap.child("Type").val();
var Description = snap.child("description").val();

$("demo").append("<tr><td>" + medname + "</td><td>" + end + 
                        "</td><td>" + start + "</td><td>" + type + 
                        "</td><td>" + Description + 
                        "</td><td><button>Remove</button></td></tr>");


}

HTML:

<!-------------------------------------- Table -------------------------------------------->
        <table>
            <thead>
                <tr>
                    <td>MedName</td>
                    <td>End</td>
                    <td>Start</td>
                    <td>Type</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody id=demo>

            </tbody>
    </table> 

2 个答案:

答案 0 :(得分:1)

首先纠正脚本中的错误。 在jquery中编写#demo而不是demo。希望这能完全帮助你

答案 1 :(得分:1)

如果删除两个主要错误,您的代码将有效。

  1. 未使用上一个答案中提到的正确选择器。如果您正在使用ID或类选择器,则$(&#39;#demo&#39;)或$(&#39; .demo&#39;)将有效。
  2. 不要制作名为“结束”的变量。 End是Javascript中的保留字。
  3. 但是,这里是不使用变量的重写:

    var rootRef = firebase.database().ref().child('users');
    
    rootRef.on("child_added", function (userRecord) {
    
      var user = userRecord.val();
      var row = $('<tr></tr>');
    
      row.append('<td>' + user.MedName + '</td>');
      row.append('<td>' + user.Start + '</td>');
      row.append('<td>' + user.Type + '</td>');
      row.append('<td>' + user.description + '</td>');
      row.append('<td><button>Remove</button></td>');
    
      $('#demo').append(row);
    
    });
    

    目前还不清楚您是否打算使用ES2015或ES5。这可能会导致兼容性问题,具体取决于代码的运行位置,但不要混淆它们。

    以下是我见过的最好的Javascript风格指南:

    AirBnB ES5 Style Guide

    AirBnB ES2015 Style Guide