使用javascript在HTML表格中显示firebase数据

时间:2017-06-09 07:58:23

标签: javascript html firebase firebase-realtime-database

我只需要用实时数据库显示数据。不添加,删除,只显示我在firebase中的数据。我需要heeeeelp:c。

This is the table that I want to fill out with the firebase info

This is the Firebase db with the info



<html>
<body>
<style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
}

table {
    border-spacing: 5px;
}

</style>

<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyDr2Im1C1lQvrxuQocW4ul69MKwRfc5g6g",
    authDomain: "denuncias-app.firebaseapp.com",
    databaseURL: "https://denuncias-app.firebaseio.com",
    projectId: "denuncias-app",
    storageBucket: "denuncias-app.appspot.com",
    messagingSenderId: "885651585540"
  };
  firebase.initializeApp(config);
</script>

<head>
    <title>Denuncias Municipales ASDE</title>
    </head>
<table style="width:100%">
  <tr id="tr">
    <th>Tipo de la Denuncia:</th>
    <th>Dirección:</th> 
    <th>Descripción:</th>
    <th>Correo:</th>
    <th>Creda por:</th>
    <th>Imagen</th>
    <th>Lat - Long</th>
  </tr>
  <tr> 
  </tr>
  <tr>
    <tr>
  </tr>
</table>

<script>
//firebase script should be here


</script>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:12)

尝试这种方式:     ...

<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Tipo de la Denuncia:</th>
    <th>Dirección:</th> 
    <th>Descripción:</th>
    <th>Correo:</th>
    <th>Creda por:</th>
    <th>Imagen</th>
    <th>Lat - Long</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.descripcion + '</td>';
                content += '<td>' + val.direccion + '</td>';
                content += '<td>' + val.estado + '</td>';
                content += '<td>' + val.imagen + '</td>';
                content += '<td>' + val.tipo + '</td>';
                content += '<td>' + val.udisplayName + '</td>';
                content += '<td>' + val.uemail + '</td>';
                content += '</tr>';
            });
            $('#ex-table').append(content);
        }
    });
</script>

注意:暂时将此行&#34; .read&#34;:&#34; auth!= null&#34; 更改为&# 34; .read&#34;:&#34; auth == null&#34; 在规则数据库中进行测试。因为,abow代码中没有认证方法。