Display Firebase data in a table in HTML

Question

Display Firebase data in a table in HTML

Navigation

#1 by (1 votes)

0

That's my firebase db

enter the description of the image here

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

javascript html firebase

asked by Hommy De Jesús 09.06.2017 в 09:17

source

1 answer

Create an object with a normalized structure How to consult data in MySQL and be able to save in SQL Server? (Python)

score 1 · Answer 1

after so much break my head, mix several methods from various forums

I have my base in Firebase

my html table:

function busca_user() {    
   
   


var db = firebase.database();
var ref = db.ref("users");
     
var table = document.getElementById("tabla");
    
//limpia la tabla
table.innerHTML = "";
 
 //con esta función recorre todos los datos almacenados en FB ordenados por mi child(tipo)
    
ref.orderByChild("tipo").on("child_added", function(snapshot){
//repite el proceso como cuantas referencias encuentre y los asigna a la lista "d"
     
  var d = snapshot.val();        
        
  {
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  
  // asigna a las celdas el valir del Child especificado
  cell1.innerHTML = d.email;
  cell2.innerHTML = d.tipo;
  }
 
        
});
 
}

 <table>
     <thead>
            <tr>
                <th  style="color:white">email</th>
                <th  style="color:white">tipo</th>                                    
             </tr>
     </thead>
     <tbody id="tabla">                                
     </tbody>
 </table>