从 firebase 加载数据到 HTML 表

Question

我有一个 FireBase 实时数据库，其中包含一些我想在 HTML 网格中显示的数据。 数据库的结构非常简单：

我想要做的是将“id”、“第一列”、“第二列”、“第三列”作为列标题和来自 DB 的数据显示在每个相应的 header 下。

这是我的 HTML 零件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <!--Firebase SDK code below-->
  <script src="/__/firebase/8.2.6/firebase-app.js"></script>
  <script src="/__/firebase/8.2.6/firebase-analytics.js"></script>
  <script src="/__/firebase/8.2.6/firebase-database.js"></script>

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>

  <script src="firebase.js"></script>

  <button onClick="readData()">Load data from FB</button>

  <table class="table table-striped" id="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>First column</th>
        <th>Second column</th>
        <th>Third column</th>
      </tr>
    </thead>
    <tbody>
</body>

</html>

JS在这里：

// Firebase reference
var database = firebase.database();
rootRef = database.ref('/');
itemsRef = database.ref('/Items/');

// Other vars
var pushLabels = ["id", "First column", "Second column", "Third column"];


function readData() {

  itemsRef.once('value', function (snapshot) {
    var arrayLen = pushLabels.length;
    var childKeyArr = [];

    var table = document.querySelector('#table tbody');

    snapshot.forEach(function (childSnapshot) {

      var childKey = childSnapshot.key;
      childKeyArr.push(childKey);
    });

    for (var i = 0; i < childKeyArr.length; i++) {

      var row = table.insertRow(-1);
      for (var j = 0; j < arrayLen; j++) {
        cell = row.insertCell(-1);
      };
    };

    for (var i = 0; i < childKeyArr.length + 1; i++) {
      database.ref('/Items/' + i).once('value', function (snapshot) {
        snapshot.forEach(function (childSnapshot) {
          var noha = childSnapshot.val();
          for (var i = 0; i < pushLabels.length; i++) {
            cell.innerHTML = noha;
          };
        });
      });
    }
  });
}

我认为这很“过于复杂”。 我能够根据数据库中父项的数量（1、2、3，如数据库层次结构屏幕截图所示）创建行，并且对于每个节点，我都能够将数据检索到快照中，但我不知道如何将其投影到网格，以便每个值正确显示到它的相关列。 我将某些东西放入单元格的部分在我的代码中显然是错误的——我只是在测试不同的方式。

任何帮助将不胜感激，此外，如果有更好的解决方案，一些库可以以更简单的方式做到这一点。 如果你能推荐，我会很高兴。 谢谢！！

Answer 1

是否有固定数量的列，或者您想动态创建列？ 您的列标题是否已经在 html 文件中，或者您是否希望从数据库中的键中创建它们？ html 文件中有列标题，但您也有一个存储相同内容的数组。 它们还匹配每个子项的键，因此看起来有点混乱。

这是一个快速示例，说明如何获取表格主体、创建新行、创建单元格、添加数据库中的值，然后将行添加到表格主体。

var itemsRef = firebase.database().ref().child("Items");
var tableBody = document.querySelector('#table tbody');

function readData() {
    itemsRef.once('value', function (snapshot) {
        snapshot.forEach(function (item_snapshot) {
            //Create html elements, TRs, TD,s etc.
            var row = document.createElement("tr");
            var col1 = document.createElement("td");
            var col2 = document.createElement("td");
            var col3 = document.createElement("td");
            var col4 = document.createElement("td");
            //Add data to the new elements.
            col1.innerText = item_snapshot.key;
            col2.innerText = item_snapshot.child("First column").val();
            col3.innerText = item_snapshot.child("Second_column").val();
            col4.innerText = item_snapshot.child("Third_column").val();
            //Append the cells into the row and the row into the table body.
            row.appendChild(col1);
            row.appendChild(col2);
            row.appendChild(col3);
            row.appendChild(col4);
            tableBody.appendChild(row);
        });
    });
}

如果我没有误解你，这听起来有点像你想让每个子项的键成为列标题，但请记住，每个子项中可能没有相同的节点，你只想加载标题一次，而不是来自每个子项。

从 firebase 加载数据到 HTML 表

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-18 16:32:53

从 firebase 加载数据到 HTML 表

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-18 16:32:53

解决方案1
0 已采纳 2021-02-18 16:32:53