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

Question

У меня есть настройка базы данных Firebase, и я хотел бы создать страницу HTML, которая отображала бы эти данные в таблице HTML. Я прикрепил структуру базы огня вместе с тем, что хотел бы видеть в таблице. Любая помощь по этому вопросу будет принята с благодарностью.

Мне удалось успешно записать результаты в веб-консоль, но она, похоже, не добавляет данные в мою таблицу.

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

<table class = "table table-striped" id="ex-table">
  <thead class="thead-inverse">
        <tr>
        <th>Item</th>
        <th>Price</th>
        <th>Sale Price</th>
        </tr>
    </thead>

<tbody>
  <tr id = "tr">
    <td id = "itemId"></td>
    <td id = "priceId"></td>
    <td id = "salePriceId"></td>
  </tr>
</tbody>
</table>

<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {

    apiKey: 
    authDomain: 
    databaseURL: 
    projectId: 
    storageBucket: 
    messagingSenderId: 
  };

  firebase.initializeApp(config);

var database = firebase.database().ref().child('Markets/Athens');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var itemId = snapshot.val().name;
        var priceId= snapshot.val().price;
        var salePriceId = snapshot.val().salePrice;

        snapshot.forEach(function(data){
        });

        content = '<tr>';
        content += '<td>' + itemId + '</td>'; //column1
        content += '<td>' + priceId + '</td>';//column2
        content += '<td>' + salePriceId + '</td>';
        content += '</tr>';
        console.log(snapshot.val());
        $('#ex-table').append(content);
    }



});

Answer 1

Создание динамической HTML-таблицы с использованием обновления в реальном времени с помощью Firebase

Вы можете загрузить полный проект ЗДЕСЬ .

Секрет все в firebase.js.файл:

(function() {
  const config = {
    //YOUR CONFIGS
  };

  firebase.initializeApp(config);
  const bigTextEvaluationStudents = document.getElementById('bigTextEvaluationStudents');
  const dbBigTextEvaluationStudentsRef = firebase.database().ref().child('bigTextEvaluationStudents');
  dbBigTextEvaluationStudentsRef.on('value', snap => bigTextEvaluationStudents.innerText = snap.val());

  var table = document.querySelector('#table1 tbody');
  const dbEvaluationStudentsRef = firebase.database().ref().child('evaluationStudents');
  dbEvaluationStudentsRef.on('value', snap => {
    while(table.hasChildNodes()) {
    table.removeChild(table.firstChild);
    }

    var students = snap.val();
    for(var i in students) {
      var row = table.insertRow(-1);
      for(var j in students[i]) {
    cell = row.insertCell(-1);
    cell.innerHTML = students[i][j];
      }
    }
  });
}());

https://labs.bawi.io/creating-a-dynamic-html-table-using-real-time-update-with-firebase-c01059a6c857