Question

试图将Firebase中的数据显示到我使用HTML创建的表中，但是当您运行该程序时，该表显示为空

我尝试使用以下代码读取数据：

var database = firebase.database();.ref().child('LcmmX1QSdBt3wTwIMnA');
    database.ref().once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.DistanceMiddle1 + '</td>';
                content += '<td>' + val.DistanceMiddle3 + '</td>';
                content += '<td>' + val.DistanceRight1 + '</td>';
                content += '<td>' + val.Distancem2 + '</td>';
                content += '<td>' + val.Distancer2 + '</td>';
                content +='<tr>';
            });
            $('#ex-table').append(content);
        }
    });

这是完整的代码：

<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/5.10.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBmf__WIK97Y8bg6Fy1kf5bphraJGQ_1D0",
    authDomain: "prueba-df28b.firebaseapp.com",
    databaseURL: "https://prueba-df28b.firebaseio.com",
    projectId: "prueba-df28b",
    storageBucket: "prueba-df28b.appspot.com",
    messagingSenderId: "351676753350"
  };
  firebase.initializeApp(config);
</script>

<head>
    <title>TheAllSeeingEye</title>
    </head>
<table style="width:100%"  id="ex-table">
  <tr id="tr">
    <th>Distance Middle 1</th>
    <th>Distance Middle 3</th> 
    <th>Distance Right 1</th>
    <th>Distance Middle 2</th>
    <th>Distance Right 2</th>

  </tr>
  <tr> 
  </tr>
  <tr>
    <tr>
  </tr>
</table>

<script>

 var database = firebase.database();.ref().child('LcmmX1QSdBt3wTwIMnA');
    database.ref().once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.DistanceMiddle1 + '</td>';
                content += '<td>' + val.DistanceMiddle3 + '</td>';
                content += '<td>' + val.DistanceRight1 + '</td>';
                content += '<td>' + val.Distancem2 + '</td>';
                content += '<td>' + val.Distancer2 + '</td>';
                content +='<tr>';
            });
            $('#ex-table').append(content);
        }
    });

</script>

</body>
</html>

这是我的数据库：

Database

这是我的结果：

The results

如何在Firebase的HTML使用数据中填充表格

0 个答案: