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

Question

我正在尝试做的事情：

我正在尝试为 firebase 中的更大应用程序构建一个评论系统。
现在我要做的就是将页面上提交的字符串显示为列表。
我从一个关于包发布的 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>

Answer 1

此代码可能有帮助：

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>'
    });
});

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

问题描述

1 个解决方案

解决方案1
0 2021-01-14 17:24:44

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

问题描述

1 个解决方案

解决方案1 0 2021-01-14 17:24:44

解决方案1
0 2021-01-14 17:24:44