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

Question

What I'm trying to do:

I'm trying to build a comments system for a larger app in firebase.
Right now all I'm trying to do is display strings submitted on the page as a list.
I adapted this from a Livelinks tutorial on packt publishing, that allowed submitting of links/title, that are then displayed as a list.
I removed the links part, and tried to adapt the title part for comments.

What's happening:

Submitting the data works fine.
The problem is displaying the data.
The page will display a blank list.
It knows the number of entries but not the actual values.

Questions

My understanding of how it all works is limited, so I can't describe exactly how I am attempting to implement the specification
I think the javascript creates an array, puts the firebase data in the array, then displays the array?
I think I might be lacking a reference to the Firebase key/id, but I'm not sure how to do/where to put this.
Every idea/avenue I've explored as a fix just seems to break things entirely.
How do I get the firebase data using javascript, then display it as a list?

(Firebase reference has been changed to 'fbname' in code below).

Any help would be greatly appreciated.

 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

This code might help:

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

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

Question

1 answers

solution1
0 2021-01-14 17:24:44

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

Question

1 answers

solution1 0 2021-01-14 17:24:44

solution1
0 2021-01-14 17:24:44