Conditionally expanding an Object recursively (nested children)

Issue

The goal of this is to have comments with recursive child comments.

As example data for this, there are posts and comments that got fetched.

let posts = [
    { id: '001a', topic: 'post topic', content: 'post content' }
]
let comments = [
    { id: '002a', postParent: '001a', directParent: '001a', content: 'comment on post' },
    { id: '003a', postParent: '001a', directParent: '002a', content: 'comment on comment' },
    { id: '004a', postParent: '001a', directParent: '003a', content: 'comment on comments comment' },
]

If I should formulate it into words, I would say: conditionally on a comment-objects parent-key, this object should become a child-comment-object of its parent-comment-object. To achieve this, I came to think that it needs a functionality to create another array. Like:

let postComments = [
    {
        id: '002a',
        postParent: '001a',
        directParent: '001a',
        content: 'comment on post',
        children: [
            { 
                id: '003a', 
                postParent: '001a', 
                directParent: '002a', 
                content: 'comment on comment',
                children: [ {id: '004a', post: '001a', parent: '003a', content: 'comment on comments comment' }} ]
            }
        ]
    },
]

The approach I tried until now, was solving this without creating such a new array that extends itself. I tried outputting the comments conditionally on it's parent in an each-block. Unfortunately this didn't leadt to a scalable solution (/ to do it recursively -I'm not sure about the right terminology here). That's how I got to the approach this question is now about and how to create a new array like shown in the example.

But as I'm still not sure if it's a good solution when having such data, any suggestion on a proven approach for such a problem is very welcome.

Unfortunately the extensive REPL I was thankfully able to create from the provided answers was overwritten when viewing and saving another REPL. I had to delete the now misleading link, but the little takeaway is to make a backup of svelte REPLS if some work went into it. Which I didn't. Anyway the answers below hold enough good examples.

Solution

Here is another solution with no recursive function. It uses map-lookup.

let posts = [
    { id: '001a', topic: 'post topic', content: 'post content' }
]
let comments = [
    { id: '002a', post: '001a', parent: '001a', content: 'comment on post' },
    { id: '003a', post: '001a', parent: '002a', content: 'comment on comment' },
    { id: '004a', post: '001a', parent: '003a', content: 'comment on comments comment' }
]

let postComments = toNestedComments(comments, posts[0].id);
console.log(postComments);

function toNestedComments(comments, postId) {
    const nestedComments = [];
    const map = {};

    for (let i = 0; i < comments.length; i++) {
        map[comments[i].id] = i;
    }

    for (let comment of comments) {
        if (comment.parent === postId) {
            nestedComments.push(comment);
        } else {
            if (!comments[map[comment.parent]].hasOwnProperty('children')) {
                comments[map[comment.parent]].children = [];
            }
            comments[map[comment.parent]].children.push(comment);
        }
    }

    return nestedComments;
}

Answered By - Mihail