Show firebase data in a HTML table with javascript

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=".1.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyDr2Im1C1lQvrxuQocW4ul69MKwRfc5g6g",
    authDomain: "denuncias-app.firebaseapp",
    databaseURL: "",
    projectId: "denuncias-app",
    storageBucket: "denuncias-app.appspot",
    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>

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>

Share Improve this question edited Jun 9, 2017 at 7:59 Alex Mamo 139k18 gold badges167 silver badges201 bronze badges asked Jun 9, 2017 at 7:58 Hommy De Jesús 411 gold badge1 silver badge2 bronze badges

Did you look at the documentation at all? This is really straightforward stuff. firebase.google.com/docs/database/web/read-and-write – Daniel Beck Commented Jun 9, 2017 at 10:28

Add a comment |

1 Answer 1

Sorted by: Reset to default 16

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Show firebase data in a HTML table with javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)