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

Question

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

Hom*_*sús 3 html javascript firebase firebase-realtime-database

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

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

w.p*_*w.p 14

试试这种方式:......

<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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	9 年，1 月前
查看次数：	10230 次
最近记录：	7 年，7 月前