如何使用 Firebase 数据填充 HTML 页面？答案

【问题标题】：How to populate a HTML page with Firebase data?如何使用 Firebase 数据填充 HTML 页面？
【发布时间】：2020-01-30 16:46:15
【问题描述】：

我正在尝试使用 firebase 数据填充页面。这是我的 firebase 数据结构...

我想要的是根据 firebase 中的帖子数量创建 div 的数量。在h2标签和p标签中带有标题和副标题的div中。

我是 firebase 的新手，所以任何帮助将不胜感激...... 而且我想从最新的帖子开始将 div 的数量限制为 4 个。

这是我的java脚本

    firebase.initializeApp(firebaseConfig);

var postsRef = firebase.database().ref("posts").orderByKey();
postsRef.once("value").then(function (snapshot) {
  snapshot.forEach(function (childSnapshot) {
    var key = childSnapshot.key;
    var childData = childSnapshot.val();
    var name_val = childSnapshot.val().title;
    var id_val = childSnapshot.val().subtitle;

     console.log(name_val);
     var post = document.getElementById('#tst-post');

    var divh2 = document.createElement('h2');
    divh2.innerText - childData.val().title + "---" + JSON.stringify(childData.val());
    $(post).append(divh2);
  });
});

我不知道我在这段代码中做了什么，我只是看了一些教程。请帮帮我。

【问题讨论】：

你好。看我的回答。如果可以的话，在 Stack Overflow 上问一个问题，说“我不知道我在这段代码中做了什么”可能不是获得一些答案的最佳方式（而且它可能会导致你的问题被关闭）。请参阅how to ask a question 上的帮助。

标签： html firebase firebase-realtime-database

【解决方案1】：

你离结果不远了。

通过在 Internet 上搜索 (https://www.google.com/search?client=firefox-b-d&q=how+to+dynamically+create+div+in+javascript)，您可以轻松找到很多关于如何动态创建 DIV 的示例。例如：https://stackoverflow.com/a/50950179/3371862

然后，在 Firebase 实时数据库文档中，您可以找到如何使用 filter data，尤其是如何使用 limitToLast()“设置从有序结果列表末尾返回的最大项目数”。

因此，如果您将所有这些放在一起，如下所示，它应该可以解决问题：

<script>
  var postsRef = firebase
    .database()
    .ref('posts')
    .orderByKey()
    .limitToLast(4);
  postsRef.once('value').then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var key = childSnapshot.key;
      var childData = childSnapshot.val();
      var name_val = childSnapshot.val().title;
      var id_val = childSnapshot.val().subtitle;

      createDiv(name_val, id_val);
    });
  });

  function createDiv(title, subtitle) {
    var myDiv = document.createElement('DIV'); // Create a <div> node
    var myTitle = document.createTextNode(title); // Create a text node
    myDiv.appendChild(myTitle); // Append the text
    var mySubtitle = document.createTextNode(subtitle); // Create a text node
    myDiv.appendChild(mySubtitle); // Append the text

    myDiv.style.backgroundColor = 'grey';
    myDiv.style.border = 'solid';
    myDiv.style.margin = '10px';

    document.body.appendChild(myDiv);
  }
</script>

【讨论】：