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")
// content
commentContentText.textContent = data.text
return commentBody
}
Looks like after objects in array no more exist loop takes undefined value and tries get avatar
attribute which causes an exception. Or I might miss something in a syntax since originaly code on Python.