如何使用 JavaScript 从 web 中的 firebase 检索数据答案

【问题标题】：How to retrieve data from firebase in web with JavaScript如何使用 JavaScript 从 web 中的 firebase 检索数据
【发布时间】：2018-12-30 16:45:29
【问题描述】：

我有类似于此处 A3 的按钮。我想从我的数据库中检查座位的可用性，并在 if 循环中进行相应的操作。但是我在 firebase 参考下的所有功能都不起作用。

我的数据库是

My web (app)
     |
    Seats(node)
        |
      Status (node)
           |
          A1 - available (value)
          A2 - available (value)
          A3 - available (value)
          A4 - available (value)

而我的js脚本是

function A3(){
  var newseat = document.getElementById("A3");
  var firebaseStatusRef = firebase.database().ref().child("Status"); 
  var firebaseSeatStatusRef = firebaseStatusRef.child("A3");

  firebaseSeatStatusRef.on('child_added', snap => {
    var seatStatus = snap.val();
  });

if (firebaseSeatStatusRef=="available") {
  newseat.className="booked-seat";
  newseat.setAttribute("class" , "booked-seat");
  firebaseStatusRef.child("A3").set("booked");
  var fill = newseat.value;
document.getElementById("fill").value += fill + " ";
Seat();

} else  {

  newseat.style.backgroundColor = 'seat';
  newseat.setAttribute("class" , "seat");
  var fill = newseat.value;
document.getElementById("fill").value -=  fill + " ";
BookedSeat();

}

}

【问题讨论】：

firebase.database().ref().child("Status"); 你的图表显示你有一个Seats 节点高于状态，所以那是firebase.database().ref().child("Seats/Status");
谢谢弗兰克，但仍然没有任何效果，甚至数据库都没有更新

标签： javascript html web firebase-realtime-database

【解决方案1】：

您的支票归结为：

var firebaseStatusRef = firebase.database().ref("Seats/Status");
var firebaseSeatStatusRef = firebaseStatusRef.child("A3");
if (firebaseSeatStatusRef=="available") {

这在 Firebase 实时数据库 API 中没有任何意义，因为您还没有从数据库中读取值。为此，您需要附加一个侦听器，然后根据该值检查您获得的快照。比如：

firebaseSeatStatusRef.on('value', snap => {
  var seatStatus = snap.val();
  if (seatStatus == "available") {
    ...
  }
});

请注意，任何需要访问数据库数据的代码都必须在内部回调块中。

这是与 Firebase 实时数据库的相当基本的交互，因此您最好研究一下Firebase documentation on reading values，并可能选择Firebase codelab。

【讨论】：