Displaying a json structure to a dXTreeList

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.

[
{
"allowedPages": [],
"controls": {
  "Apple": false,
  "Banana": false,
  "Orange": false,
  "Grape": false
},
"hasAccess": true,
"Action": "Index",
"menuName": "FruitBasket",
"submenus": []
},
{
"allowedPages": [],
"controls": {},
"pageAccess": true,
"pageAction": "#",
"pageName": "TropicalFruits",
"submenus": [
  {
    "action": "tropicalUser",
    "Controls": ["Mango", "Pineapple"],
    "allowedControls": null,
    "controller": "admin",
    "hasAccess": true,
    "roles": {
      "TropicalAdmin1": ["Mango", "Pineapple"],
      "TropicalAdmin2": ["Mango"]
    },
    "subchildMenu": [],
    "submenu": "ExoticFruits"
    }
  ]
 }
]

This is the json structure. I need to display the pages and their respective controls under them as dxTreeList. Also, I wanted to bind the check box with the appropriate data with access.

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": "FruitBasket",    
"parentId": 0,
"pageName": "FruitBasket",  
"action": "#",
"pageAccess": true
},
{
   "id": "TropicalFruits", 
   "parentId": "FruitBasket",
   "pageName": "TropicalFruits",  
   
   "action": "",
   "pageAccess": true
},
{
   "id": "Mango",    // This is control. I have set it as child node
   "parentId": "TropicalFruits",
   "pageName": "Mango",    
   "action": "",
   "pageAccess": true
},
{
"id": "Pineapple",    // This is control. I have set it as child node
   "parentId": "TropicalFruits",
   "pageName": "Pineapple",    
   "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',
        hasAccess: page.hasAccess,
        controller: page.controller || '',
        roles: page.roles || {},
        allowedControls: page.allowedControls || [],
        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;
}

And I have implemented the code to display the data in the desired format in dxTreeList. But I couldn’t set the values and display in the desired format. The controls for the main Menu have not been displayed.
Sorry if I look dumb. But I am new to ASP and JQuery.

Could you please help me how to do that?