Issue in creating Tree in JS

Question

(Disclaimer, I am not an expert in JS. Currently learning and doing. Excuse me if I made any blunders. but help me)

I have been trying to implement a new functionality to the existing Autodesk Forge Hubs code. I want to retrieve derivatives.data.id from the relationships object of a response body. The response body is from the API

`GET /api/hubs/${hubId}/projects/${projectId}/contents/${itemId}/versions`

To explain my issue I will put the code snippet as before and after

Before:

function createTreeNode(id, text, icon, children = false) {
    return { id, text, children, itree: { icon } };
}


async function getVersions(hubId, projectId, itemId) {
    const versions = await getJSON(`/api/hubs/${hubId}/projects/${projectId}/contents/${itemId}/versions`);
    return versions.map(version => createTreeNode(`version|${version.id}`, version.attributes.createTime, 'icon-version'));
}

Output : Working fine

After (Modified code) :

function createTreeNode(id, text, icon, children = false, derivativesId = null) {
    return { id, text, children, itree: { icon, derivativesId } };
}

async function getVersions(hubId, projectId, itemId) {
    const versions = await getJSON(`/api/hubs/${hubId}/projects/${projectId}/contents/${itemId}/versions`);
    versions.forEach(version => {
        const { id, attributes,relationships } = version;
        const derivativesId = relationships?.derivatives?.data?.id || null;
        console.log(`Version ID: ${id}`, `Derivatives ID: ${derivativesId}`);
    });

    return versions.map(version => {
        const { id, attributes,relationships} = version;
        const derivativesId = relationships?.derivatives?.data?.id || null; // Extract 'id' from 'derivatives' object

        return createTreeNode(`version|${id}`, attributes.createTime, 'icon-version', derivativesId);
    });
}

Output: Not working

Here is the original code by autodesk: https://raw.githubusercontent.com/autodesk-platform-services/aps-hubs-browser-nodejs/develop/wwwroot/sidebar.js

What mistake did I make, and why is it not loading the tree?

I know there are two versions (response body) that have no derivatives inside the relationships. Is this causing the tree to continue looping or what is the error? How to handle the situation?

Thanks in advance for your help!

Answer 1

I figured out the cause of problem. The placement of derivativesId within the createTreeNode stops the tree load when there is a null.

function createTreeNode(id, text, icon, children = false, derivativesId = null) {
    return { id, text, children, itree: { icon, derivativesId } };
}

Answer:

function createTreeNode(id, text, icon, children = false, derivativesId = null) {
    return { id, text, children, itree: { icon}, derivativesId } };
}