從Firebase數據庫中檢索數據

我對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>

來源

2017-01-11 Cutie Pie

是回調正被觸發的呢？您的JavaScript控制檯中是否顯示任何消息？ –

我沒有收到任何這樣的消息，數據根本不顯示，更不用說顯示在表中。 –

您是否嘗試在調試器中進入回調？堆棧溢出是一個臭名昭着的低效調試工具，所以如果你自己做這些步驟並告訴我們，它確實有幫助。或者：你可以在jsbin中重現問題，所以我們可以在那裏看看它嗎？ –

第一所有更正腳本中的錯誤。在jquery中寫入#demo而不是demo。希望這會完全幫助你

來源

2017-02-14 05:01:47 Rahul

如果你刪除了兩個重大錯誤，你的代碼將工作。

不使用前面答案中提到的正確選擇器。 $（'＃demo'）或$（'。demo'）將在您使用ID或類選擇器時起作用。
不要創建一個名爲'end'的變量。 End是Javascript中的保留字。

不過，在這裏是不使用變量重寫：

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

來源

2017-03-02 05:09:40 deezy