The problem is my movies' comment values return undefined in third photo. But in console it works properly. I want to access my comments and retrieve them. How can i do this? (btnComment is my buttons id. textComment is textarea tag's id. show variable giving my movie's id. my movie's id=1)

btnComment.addEventListener('click', (e) => {
    var movieComment = document.getElementById('textComment').value;
    push(child(firebaseRef, 'Movies/' + show + '/Comments'), movieComment) {
        movieComment: movieComment
    };
});
get(child(firebaseRef, `Movies/` + show + '/Comments')).then((childSnapshot) => {
    if (childSnapshot.exists()) {
        console.log(childSnapshot.val());
    } else {
        console.log("error");
    }
})

var body2 = document.getElementById('detail2');

function AddItemsToTable2(comment) {
    const comments = `
              <td>Alan Smith</td>
              <td><i class="fa fa-star" style="color:green"></i></td>
              <td>${comment}<h6>[May 09, 2016]</h6></td>
            `;
    html = comments;
    body2.innerHTML += html;
}

function AddAllItemsToTable2(TheComments) {
    body2.innerHTML = "";
    TheComments.forEach(element => {
        AddItemsToTable2(element.movieComment);
    });
}

function getAllDataOnce2() {

    var show = qs["movieId"];
    get(child(firebaseRef, `Movies/` + show + '/Comments/')).then((childSnapshot) => {
        var comments = [];
        comments.push(childSnapshot.val());
        AddAllItemsToTable2(comments);

    });
}
window.onload = (event) => {
    getAllDataOnce2();

};