I need help displaying pages and their respective controls in a dxTreeList. My current implementation is not showing the controls for the main menu as expected.

`
[
{
“id”: “Dashboard”,
“parentId”: 0,
“pageName”: “Dashboard”,
“action”: “Index”,
“pageAccess”: true
},
{
“id”: “Prox”,
“parentId”: 0,
“pageName”: “Prox”,
“action”: “#”,
“pageAccess”: true
},
{
“id”: “Users”,
“parentId”: 0,
“pageName”: “Users”,
“action”: “”,
“pageAccess”: true
},
{
“id”: “dataGrid”,
“parentId”: “Users”,
“pageName”: “dataGrid”,
“action”: “”,
“pageAccess”: true
},
{
“id”: “btnnew”,
“parentId”: “Users”,
“pageName”: “btnnew”,
“action”: “”,
“pageAccess”: true
}
]

`

Modified Data Format:

I have transformed the data to display in the following format:
[ { "id": "Dashboard", "parentId": 0, "pageName": "Dashboard", "action": "Index", "pageAccess": true }, { "id": "Prox", "parentId": 0, "pageName": "Prox", "action": "#", "pageAccess": true }, { "id": "Users", "parentId": "Prox", "pageName": "Users", "action": "", "pageAccess": true }, { "id": "grid1", "parentId": "Users", "pageName": "grid1", "action": "", "pageAccess": true }, { "id": "grid2", "parentId": "Users", "pageName": "grid2", "action": "", "pageAccess": true } ]

Implementation:

Here is the JavaScript function I am using to flatten the controls data:

`function flattenControlsData(pages, parentId = 0) {
let flatControlsTreeData = [];

pages.forEach(page => {
    if (!page) return;

    const id = page.pageName || 'No ID';
    const transformedPage = {
        id: id,
        parentId: parentId,
        pageName: page.pageName || 'Unnamed Page',
        action: page.pageAction || '',
        pageAccess: page.pageAccess,
        controller: page.controller || '',
        roles: page.roles || {},
        allowedControls: page.allowedControls || [],
        roleControlMappingDetail: page.roleControlMappingDetail || null,
        allControls: Object.keys(page.controls || {}),
        isAccess: page.isAccess || false
    };

    if (transformedPage.pageAccess) {
        flatControlsTreeData.push(transformedPage);
    }

    // Add controls if they exist
    if (Array.isArray(page.Controls)) {
        page.Controls.forEach(control => {
            flatControlsTreeData.push({
                id: control,
                parentId: id,
                pageName: control,
                action: '',
                pageAccess: true,
                controller: '',
                roles: {},
                allowedControls: [],
                roleControlMappingDetail: null,
                allControls: []
            });
        });
    }

    // Add submenus
    if (Array.isArray(page.submenus)) {
        flatControlsTreeData = flatControlsTreeData.concat(flattenControlsData(page.submenus, id));
    }

    // Add subchildMenu
    if (Array.isArray(page.subchildMenu)) {
        flatControlsTreeData = flatControlsTreeData.concat(flattenControlsData(page.subchildMenu, id));
    }
});

console.log(flatControlsTreeData);
return flatControlsTreeData;

}
`