0

Im creating a web app to show data from firebase and display on a table. But I found difficulty in fetching all the data, only one row is displayed.

here is the database structure: enter image description here

Here is the result:

enter image description here

Please show how can I properly retrieve all data I needed.

here is my code:

<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>
Nick.Mc
  • 18,304
  • 6
  • 61
  • 91
cdrrmo maasincity
  • 1
  • 2
  • Can you show us the Database data ?? You can export the database data and paste it in the question [Click me to See how to export](https://stackoverflow.com/a/47182298/10953546) – Fire-In-D-Hole Mar 23 '19 at 14:24
  • Not knowing much about firebase or w3. Put a `debugger;` before `w3.displayObject`. Open the F12 console and inspect `myObject` and see if you are actually getting more than one line of data back. Use the network tab to see what kind of data is being posted back, Use the console to see if there are any javascript errors. Also I added w3 and javascript tags because I suspect that's where your real problem is. – Nick.Mc Mar 24 '19 at 01:46
  • Good day @André Kool I already updated my post the database structure was already included, thanks for the response.. – cdrrmo maasincity Mar 24 '19 at 03:18
  • thanks @Nick.McDermaid i will try your advice.... – cdrrmo maasincity Mar 24 '19 at 03:19

0 Answers0