How to retrieve data from firebase in web with JavaScript

Question

I have buttons similar to the one here A3. I want to check the availability of the seat from my database and do accordingly in the if loop. But none of my functions below the firebase reference is working.

My database is

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

And my js script is

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"); Your diagram shows that you have a Seats node above status, so that'd be firebase.database().ref().child("Seats/Status"); — Frank van Puffelen
– Frank van Puffelen, Commented Dec 30, 2018 at 7:15
Thank you Frank but still nothing works, not even the databse is updated — Dini_Sarithma
– Dini_Sarithma, Commented Dec 30, 2018 at 8:34

Frank van Puffelen · Accepted Answer · 2018-12-30 08:45:29Z

1

Your check boils down to:

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

This makes no sense in the Firebase Realtime Database API, as you're not reading the value from the database yet. To do this, you'll need to attach a listener, and then check the snapshot that you get against the value. Something like:

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

Note that any code that needs access to the data from the database must be inside the callback block.

This is fairly basic interaction with the Firebase Realtime Database, so you'd do well to study the Firebase documentation on reading values, and possibly taking the Firebase codelab.

answered Dec 30, 2018 at 8:45

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to retrieve data from firebase in web with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related