Retrieving data from Firebase Web

Question

Been trying multiple different ways to get this to work. The aim is to have a welcome box that doesn't appear if the user has seen it before. If the Active field in my database shows a 1 the welcome div should not be visible.

document.onload = function() {
  var active
  var user = firebase.auth().currentUser;
  var uid;

  if (user != null) {
    uid = user.uid;
  }

  firebase.database().ref("Users/" + uid + '/Active').on("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var active = childSnapshot.val();
      if (active = 1) {
        document.getElementById("welcome").style.display = "none";
        document.getElementById("box").style.display = "none";
        document.getElementById("title").style.display = "none";
        document.getElementById("text").style.display = "none";
      }
    });
  });
};

Thank you in advance for any help or advice.

Answer 1

You need to read the property of the object - childSnapshot.val().active.

Respectfully, you're going about it backwards. If the user is not in the database, you want to show the welcome card. If the user is in the database, they've probably already interacted with the app and seen the welcome card.

The welcome card should be hidden by CSS display: none so it does not blink or show at all on page load.

Use a boolean, native true or false (notice no quotes around the word) rather than a 1 or 0, in my opinion. Initialize var showWelcomeCard = false at the top of your script.

Once you determine that you should show the welcome card, show it; not the other way around.

Lastly don't assume they don't want to see the welcome/start card again. Offer them a choice. A checkbox saying "Don't show this again". So, change the property from active to showWelcomeCard .