Как исправить проект моего веб-приложения, чтобы получать данные из базы данных Firebase и заполнять HTML-таблицу, используя JavaScript - PullRequest
Новая
       15

Как исправить проект моего веб-приложения, чтобы получать данные из базы данных Firebase и заполнять HTML-таблицу, используя JavaScript

0 голосов
/ 23 марта 2019

Я создаю веб-приложение для отображения данных из Firebase и отображения на столе. Но я нашел затруднения в получении всех данных, только одна строка отображается.

вот структура базы данных: введите описание изображения здесь

Вот результат:

enter image description here

Пожалуйста, покажите, как я могу правильно получить все необходимые данные.

вот мой код: 

<html>
<head>
<title>incident record</title>

 <head></head>

 <script src="https://www.w3schools.com/lib/w3.js"></script>   

<body>

<table id="example" >
<thead>
<tr>
<th>ID</th>
<th>Type</th>
<th>Location</th>
<th># Involved</th>
<th>Caller No.</th>
<th>Date</th>
<th>Detail</th>
<th>Action</th>

</tr>
</thead>  

<tbody id="table_body">    

<tr  w3-repeat="Id">
                    <td >
                       {{Id}} 
                    </td >
                    <td>
                       {{Incident_type}}
                    </td>
                    <td >
                       {{Incident_location}}
                    </td>
                    <td >
                        {{Number_Individual}} 
                    </td>
                    <td >
                        {{Caller_info}}
                    </td>
                    <td >
                        {{Date}}
                    </td>
                     </tr>

</tbody>
</table>

<script script src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js"></script>

  <script>      

    var config = {
    apiKey: "key",
    authDomain: "domain",
    databaseURL: "https:/firebaseio.com",
    projectId: "1faf5",
    storageBucket: "appspot.com",
    messagingSenderId: "123451"
  };
  firebase.initializeApp(config);

var rootRef = firebase.database().ref("messages");

rootRef.on("child_added",snap => {
var Id = firebase.database().ref().push().getKey(); 

var Incident_type = snap.child("Incident_type").val();
var Incident_location = snap.child("Incident_location").val();
var Number_Individual = snap.child("Number_Individual").val();
var Caller_info = snap.child("Caller_info").val();
var Date = snap.child("Date").val();
//$('#table_body').append("<tr><td id='id'>" + Id + "</td><td>"   

var myObject= {Id:[
{
      "Id": Id,
      "Caller_info" : Caller_info ,
      "Date" : Date,
      "Incident_location" :Incident_location,
      "Incident_type" : Incident_type,
      "Number_Individual" : Number_Individual
    }, 
]};     

w3.displayObject("example", myObject);
});   

        </script>

    </body>
</html>
...