I’m new in JavaScript and trying to build a Comments tree looping through Comment instances (API response from backend).
Rendering root comments (level 0) causes no issues while recursive call of child comments causes ‘Cannot read properties of undefined’ on child attributes.

ws.onmessage = function(e){
        const rawData = JSON.parse(e.data);
        const responseAction = rawData.action
        const data = rawData.data
            switch(responseAction) {

                case "list":
                    for (const rootComment of data) {
                        commentTreeBuilder(rootComment, allCommentsSection)       
                    }
                    break;

In a response I receive array of Comment objects (including nested comments as children).
In function above it takes 2 arguments : 1)Comment object itself; 2)Container where it has to be appended.

function commentTreeBuilder(comment, parentContainer) {

    var childrenArraySize = Object.keys(comment.children).length; 

    if (comment.parent == null) {

        let parentCommentBody = generateCommentContainer(comment)

        // creation of wrapper for comment tree
        let rootCommentWrapper = document.createElement("section")
        rootCommentWrapper.setAttribute("class", "root-comment-section") 
        rootCommentWrapper.appendChild(parentCommentBody)
        parentContainer.appendChild(rootCommentWrapper)
                              
        if (childrenArraySize !== null && childrenArraySize > 0) { 
            let children = comment.children
            for (const child of children) {
                let childBody = generateCommentContainer(child); // (child, where to append)
                childBody.classList.add("child");
                commentTreeBuilder(childBody, rootCommentWrapper) 
            };   
        }
    } 
}

Then it recursively calls generateCommentContainer(comment) which just create a new comment templates (header, text, footer).
Currently I have only 2 objects [in array] to test: Root comment and one child. However looping will continue to take objects from array causing undefined error: TypeError: Cannot read properties of undefined (reading 'avatar')

function generateCommentContainer(data) {
    // Body
    var commentBody = document.createElement("div")
    commentBody.setAttribute("class", "comment-body")
    // Header Root
    var commentHeader = document.createElement("div")
    commentHeader.setAttribute("class", "comment-header")
    // Header-SubSection
    var headerSubSection = document.createElement("div")
    headerSubSection.setAttribute("class", "comment-header-sub")
    commentHeader.appendChild(headerSubSection)
    // Header-Rating
    var headerRating = document.createElement("div")
    headerRating.setAttribute("class", "comment-rating-container")
    commentHeader.appendChild(headerRating)

    // Content
    var commentContent = document.createElement("div")
    commentContent.setAttribute("class", "comment-content")
    var commentContentText = document.createElement("span")
    commentContentText.setAttribute("class", "comment-text")

    // appending comment child sections to body
    commentContent.appendChild(commentContentText)
    commentBody.appendChild(commentHeader)
    commentBody.appendChild(commentContent)
    
    // header
        // avatar constructing
    if (data.user.avatar) {  //                   <== Error in this line
        var avatarPath = data.user.avatar
    } else {
        var avatarPath = defaultUserAvatar
    }

    var avatar = document.createElement("img")
    avatar.setAttribute("class", "user-avatar")
    avatar.setAttribute("src", avatarPath)
    avatar.setAttribute("alt", "UserAvatar")
        // Nickname
    var userNickname = document.createElement("span")
    userNickname.setAttribute("class", "user-username")
    userNickname.textContent = data.user.username
    
    headerSubSection.appendChild(avatar);
    headerSubSection.appendChild(userNickname);

    // content
    commentContentText.textContent = data.text

   return commentBody 
}