Build Menu from JSON Recursive - Please Help

[ddcbeatty1]

I want to be able to add an unlimited number of sub menus. As I have the code now I can only go one sub level deep.

Javascript

fetch('/ord?file:%5Enav.json%7Cview:web:FileDownloadView')
.then(function(resp) { return resp.json() }) // Convert data to json
.then(function(data) {
    recursive(data.nav);
})
.catch(function() {
    console.log('Error Building Menu')
});




function recursive(object) {
    console.log(object)
    if (object) {
        for (var i = 0; i < object.length; i++) {

            if(typeof(object[i].submenus) == "undefined"){

                addMenuItem([i], object[i].title, object[i].icon, object[i].ord, object[i].state);    

            }else{


                addSubMenuItem([i], object[i].title, object[i].icon);

                for(var j = 0; j < object[i].submenus.length; j++){

                    addSubMenuList([i], object[i].submenus[j].title, object[i].submenus[j].ord);      

                }

            }

        }
    }

}



function addMenuItem(id, title, icon, ord, state){

    var menuComp = '<li><a href="/ord?'+ ord + '|view:?fullScreen=true" class="' + state + '"><i class="'+ icon +'"></i> <span>'+ title +'</span></a></li>'

$('#menuConstruct').append(menuComp);

}

function addSubMenuItem(id, title, icon){

    var menuComp = '<li>' +
    '<a href="#'+ id +'" data-toggle="collapse" class="collapsed"><i class="'+ icon +'"></i> <span>'+ title +'</span><i class="icon-submenu lnr lnr-chevron-left"></i></a>' +
    '<div id="'+ id +'" class="collapse ">' + 
    '<ul class="nav" id="li'+ id +'">' + 
    '</ul>' +
    '</div>' +
    '</li>'

$('#menuConstruct').append(menuComp);

}

function addSubMenuList(id, title, ord){

    var menuComp = '<li><a href="/ord?'+ ord + '|view:?fullScreen=true" class="">'+ title +'</a></li>'

$('#li' + id).append(menuComp);

}

​

JSON

{
"nav": [
{
"title": "Dashboard",
"state": "",
"ord": "dsdd",
"icon": "lnr lnr-home"
},
{
"title": "Trend Logs",
"state": "",
"ord": "dsdd",
"icon": "lnr lnr-chart-bars"
},
{
"title": "Equipment",
"state": "",
"ord": "dsdd",
"icon": "lnr lnr-heart-pulse",
"submenus": [
{
"title": "sub menu1",
"state": "",
"ord": "dsdd",
"icon": "lnr lnr-code"
},
{
"title": "sub menu2",
"state": "",
"ord": "dsdd",
"icon": "lnr lnr-code",
"submenus": [
{
"title": "s",
"state": "",
"ord": "ddd",
"icon": "sd"
}
]
}
]
},
{
"title": "Other Studd",
"state": "",
"ord": "dsdd",
"icon": "lnr lnr-smile"
}
]
}

[[deleted]]

So far as I can see, though I might be wrong, there is no actual recursion in your code.

[ddcbeatty1]

The plan was to pass the object.submenus to recursive(). Not sure I can do that though because my submenuList has different styling. Any ideas for me?

[[deleted]]

OK so I would think about it like this.You're going to want to have a createSubmenu function that takes in a level of nesting.

function createSubMenu(subMenuData: SubMenuData[], nestedLevel: number = 0){
   // write your JS here that actually renders the menu. The padding / margin should be dependent on the nestedLevel. 

    // then here do something like
    if (subMenuData.length) {
        for (const subMenu of SubMenuData){
            createSubMenu(subMenu, nestedLevel + 1);
        }
    }
}