如何使用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