Show firebase data in a HTML table with javascript

javascript html firebase firebase-realtime-database

16,193

try this way : ...

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

Notes: temporarily change this line ".read": "auth != null" to ".read": "auth == null" in rules database for test. Because, did not have authentication method in abow codes.

16,193

Author by

Admin

Updated on June 24, 2022

Comments

Admin almost 2 years

I just need to show the data with the realtime database. Not add, delete, just show the data that I have in the firebase. I need 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>

Admin almost 7 years

Thanks for aswering, I change the auth == null. I'm getting an error. Uncaught ReferenceError: $ is not defined at index.html:44
Admin almost 7 years

I will take a look
Admin almost 7 years

THANKS I LOVE YOU ITS WORKING. But now, I need to display the an image. @w.p
w.p almost 7 years

add <img> tag in image <td> : content += '<td> <img src=" ' + val.imagen + ' "/></td>';