Javascript 无法将数据从firebase获取到我的html页面

基本上，我想将firebase帐户中的数据显示到html div元素中，但由于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>

仪表板
就这么做吧

预订
var ref=新的火基（“https://fiery-torch-164.firebaseio.com");
参考on（值），功能（快照）{
console.log（snapshot.key（））；
document.write（snapshot.key（））；
});

---

当前您正在打印根节点的密钥，该密钥为空。您可以打印子节点的密钥，例如

/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-in循环迭代对象属性

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>");
    };
  }
});

ref.on（'value'，函数（快照）{
console.log（snapshot.key（））；
var data=snapshot.val（）；
for（var输入数据）{
if（data.hasOwnProperty（key））{
document.write（数据[键].name+“
”；
};
}
});

JSFiddle：

使用嵌套循环访问子节点。有关更新，请参阅JSFIDLE

var ref=新Firebase（“https://fiery-torch-164.firebaseio.com/days");
参考on（值），功能（快照）{
var data=snapshot.val（）；
//显示一周中的几天。
for（var输入数据）{
if（data.hasOwnProperty（key））{
document.write（数据[键].name+“
”；
};
}
文件。写（“

”）；
//使用嵌套的for in循环显示一周中每天的插槽。
for（var输入数据）{
if（data.hasOwnProperty（key））{
var slots=data[key].slots；
var dayOfWeek=data[key].name；
用于（插槽中的var slotKey）{
if（slots.hasOwnProperty（slotKey））{
//获得一个单独的插槽。
var插槽=插槽[slotKey]；
控制台日志（插槽）；
文档。写入（'星期几：'+dayOfWeek+'
）；
document.write（'Slot Time:'+Slot.Time+'
'）；
document.write（'Booked:'+slot.Booked+'
'）；
文件。写（“
”）；
}
}                              
}
}
//直接访问节点内的数据。
console.log（数据['monday'].name）；//打印星期一。
log（数据['sunday']['slots']['72'].booked）；//打印错误。
console.log（data.tuday.slots['72'].booked）；//打印错误。
});

非常感谢您的及时回复Gregg。请再容忍我一会儿。在for循环中，数据P.S it not working中的var键是什么意思：/I正在使用该语句循环所有键值对。您是否尝试过JS fiddle？要从firebase查询中提取数据，您可以使用for in循环来迭代这些值（如星期一、星期二等）。这就是jsFiddle演示的内容。你能用提供的例子实现你的目标吗？是的，格雷格，我就快到了，如果我试图访问我钥匙的孩子，比如钥匙名的孩子，会怎么样？那么我写什么呢？在处理对象时，您需要熟悉括号符号。请参阅此资源：。

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.

});