使用 Firebase 数据创建 HTML 表

Question

我设置了一个 firebase 数据库，我需要创建一个包含必要信息的 HTML 表。以下是我设置 Firebase 数据的方式。

{
  "Markets" : {
    "Athens" : {
      "Item" : {
        "name" : "Beef",
        "price" : 10,
        "salePrice" : 3
      }
    }
  }
}

这就是我设置 HTML 表和尝试检索数据的代码的方式。该表正在适当地创建，但我没有看到任何数据。任何帮助将不胜感激。

<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Name:</th>
    <th>Price:</th> 
    <th>Sale Price:</th>

 </table> 

<script>
    var database = firebase.database();
    database.ref().once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.name + '</td>';
                content += '<td>' + val.price + '</td>';
                content += '<td>' + val.salePrice + '</td>';

                content += '</tr>';
            });
            $('#ex-table').append(content);
        }
    });
</script>

Answer 1

现在您正在读取根节点。在您访问 name、price 和 salesPrice 属性之前，您的 JSON 中还有更多级别的数据。您需要在回调或查询中导航这些级别。后者的一个例子：

var database = firebase.database();
database.ref('Markets/Athens').once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        snapshot.forEach(function(data){
            var val = data.val();
            content +='<tr>';
            content += '<td>' + val.name + '</td>';
            content += '<td>' + val.price + '</td>';
            content += '<td>' + val.salePrice + '</td>';

            content += '</tr>';
        });
        $('#ex-table').append(content);
    }
});