How to dyanamically get the data on sql using d3.js with recursive functions?

I built a tree with d3.js. The Head and children as shown in the image attached:
https://www.awesomescreenshot.com/image/51112170?key=ef216990b59101f1fa063f72df525fb4

If it is ordinary HTML and Javascript, it will show children:
https://www.awesomescreenshot.com/image/51114459?key=1c64ecfe53c7a0f818aa5dfad4a76d90

Now the goal is pull out the children like E, F, G as dynamic users from the SQL

In the first level, children is working just like on the first image.

But the next children wont show up. Example: John Smith here has 1 childnode name Hanah (as Level 2- or F 1st image) then Hanah has childnode name Abby (Level 3 or G on first image).

And here is the code:

`const downlineUsersData = @json($downlineUsers['downline']);
    
    const simplifiedDownlineData = Object.values(downlineUsersData).map(userWrapper => ({
        name: `${userWrapper.user.name} ${userWrapper.user.lastname}`,
        profilePicture: userWrapper.user.profile_picture ? "{{ asset('') }}" + userWrapper.user.profile_picture : defaultProfileImage,
        status: userWrapper.user.acountStatus,
        children: []   
    }));


    const treeData = {
        name: uplineUsername,
        profilePicture: uplineImage,
        children: simplifiedDownlineData
    };

    function addDownlineUsers(parent, downlineUsers) {
        if (!downlineUsers || downlineUsers.length === 0) return;

    parent.children = downlineUsers.map(user => {
        const childNode = {
            name: `${user.user.name} ${user.user.lastname}`,
            profilePicture: user.user.profile_picture,
            status: user.user.acountStatus,
            children: []
        };

        if (user.downline && user.downline.length > 0) {
            addDownlineUsers(childNode, user.downline);
        }
        return childNode;
    });

        downlineUsers.forEach((user, index) => {
            if (user.downline && user.downline.length > 0) {
                console.log("Recursively adding downline for", user.name, user.downline); 
                addDownlineUsers(parent.children[index], user.downline);
            }
        });
    }
`

You need to sign in to view this answers

Related Post