CODEWITHSUNDEEP
javascripthtmlwebfirebase-realtime-database
Dini_Sarithma
Dini_Sarithma

Reputation: 33

How to retrieve data from firebase in web with JavaScript

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();

}

}

Upvotes: 2

Views: 1705

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598827

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.

Upvotes: 1

Related Questions