使用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);
    }
});