如何使用javascript在html中将firebase数据显示为列表

How to display firebase data as list in html using javascript?

本文关键字：数据 显示 列表 firebase 中将 何使用 javascript html      更新时间：2024-04-16

我要做的事情：

  • 我正在尝试为firebase中的一个更大的应用程序构建一个评论系统
  • 现在，我所要做的就是将页面上提交的字符串显示为列表
  • 我改编自一个关于packt发布的Livelinks教程，该教程允许提交链接/标题，然后显示为列表
  • 我删除了链接部分，并试图调整标题部分以获得评论

发生了什么：

  • 提交数据效果良好
  • 问题是显示数据
  • 页面将显示一个空白列表
  • 它知道条目的数量，但不知道实际值

问题

  • 我对这一切如何工作的理解是有限的，所以我无法准确描述我是如何尝试实现规范的
  • 我认为javascript创建了一个数组，将firebase数据放在数组中，然后显示数组
  • 我想我可能缺少对Firebase密钥/id的引用，但我不知道该如何做/放在哪里
  • 我探索的每一个想法/途径似乎都会彻底打破现状
  • 如何使用javascript获取firebase数据，然后将其显示为列表

（在下面的代码中，Firebase引用已更改为"fbname"）。

如有任何帮助，我们将不胜感激。

function Comments(fbname) {
  var firebase = new Firebase("https://" + fbname + ".firebaseio.com/");
  this.firebase = firebase;
  var commentsRef = firebase.child('comments');
  this.submitComment = function(text) {
    commentsRef.push({
    text: text
    });
  };
  this.onCommentsChanged = function() {};
 commentsRef.on('value', function(snapshot) {
    var comments = snapshot.val();
    var preparedComments = [];
	
    for (var text in comments) {
      if (comments.hasOwnProperty(text)) {
        preparedComments.push({
          text: comments.text
        })
      }
    }
    this.onCommentsChanged(preparedComments);
  }.bind(this));
 
};
$(document).ready(function() {
	var ll = new Comments('fbname');
	$(".comment-form form").submit(function(event) {
    event.preventDefault();
    ll.submitComment($(this).find('input.comment-text').val());
    $(this).find("input[type=text]").val("").blur();
    return false;
  });
  ll.onCommentsChanged = function(comments) {
    $(".comments-list").empty();
    comments.map(function(comment) {
      var commentElement = "<li><a href='" + comments.text + "</a></li>";
      $(".comments-list").append(commentElement);
    });
  };
});
<html>
  <head>
    <script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <h1>Comments Test</h1>
    <div class="comment-form">
      <form>
        <input type="text" class="comment-text" placeholder="comment text.."/>
        <input type="submit" value="Comment"/>
      </form>
    </div>
    <div class="comments">
      <ul class="comments-list">
      </ul>
    </div>
  </body>
</html>

此代码可能会有所帮助：

db.collection("comments").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        var string = JSON.stringify(doc.data())
        var parsed = JSON.parse(string)
        document.getElementById("yourcontainer").innerHTML += parsed.text + 
        '<br>'
    });
});
相关文章：