Невозможно получить данные из firebase на мою страницу html

Question

В основном я хочу отображать данные из моей учетной записи firebase в свой элемент div html, но я не могу это сделать, поскольку div остается пустым. Я новичок в firebase и javascript, поэтому, пожалуйста, несите меня. вот код, который я написал.

<div class="content"> 
    <h1>Dashboard</h1> 
    <p>Just DO it!</p> 
    <div id="box"> 
     <div class="box-top">Bookings</div> 
     <div class="box-panel"> 
      <script> 

       var ref = new Firebase("https://fiery-torch-164.firebaseio.com"); 
       ref.on('value', function(snapshot) { 
        console.log(snapshot.key()); 
        document.write(snapshot.key()); 
       }); 

      </script> 
     </div> 
    </div> 
</div> 

Here is the screenshot of my firebase.

Answer 1

В настоящее время вы печатаете ключ для корневого узла, который является нулевым. Вы можете распечатать ключ для дочернего узла, например /days.

var ref = new Firebase("https://fiery-torch-164.firebaseio.com/days"); 
ref.on('value', function(snapshot) { 
    console.log(snapshot.key()); 
    document.write(snapshot.key()); 
}); 

Для демонстрации вы можете выполнить итерацию свойств объекта, используя javascript for for loop.

ref.on('value', function(snapshot) { 
    console.log(snapshot.key()); 
    var data = snapshot.val(); 
    for (var key in data) { 
    if (data.hasOwnProperty(key)) { 
     document.write(data[key].name + "<br>"); 
    }; 
    } 
}); 

JSFiddle: https://jsfiddle.net/bhn139ep/

доступа дочерних узлов с использованием вложенных циклов. См. JSFiddle для обновления.

https://jsfiddle.net/bhn139ep/3/

var ref = new Firebase("https://fiery-torch-164.firebaseio.com/days"); 
ref.on('value', function(snapshot) { 

var data = snapshot.val(); 

//Show Days of week. 
for (var key in data) { 
    if (data.hasOwnProperty(key)) { 
     document.write(data[key].name + "<br>"); 
    }; 
} 
document.write('<br><br>'); 

//Show Slots for each day of week using a nested for in loop. 
for (var key in data) { 
    if (data.hasOwnProperty(key)) { 
     var slots = data[key].slots; 
     var dayOfWeek = data[key].name; 

     for (var slotKey in slots) { 
      if (slots.hasOwnProperty(slotKey)) { 

       //Get an individual slot. 
       var slot = slots[slotKey]; 

       console.log(slot); 
       document.write('Day of week: ' + dayOfWeek + '<br>'); 
       document.write('Slot Time: ' + slot.time + '<br>'); 
       document.write('Booked: ' + slot.booked + '<br>'); 
       document.write('<hr>'); 
      } 
     }        
    } 
} 

//Access data within a node directly. 
console.log(data['monday'].name); //Prints Monday. 
console.log(data['tuesday']['slots']['72'].booked); //prints false. 
console.log(data.tuesday.slots['72'].booked); //prints false. 

});