Multi level menu using json

See more:

C#

jQuery

I'm an trying to build a menu using response from json. I am currently able to build the parent menu but finding ut difficult to append the sub menus. When i click on the parent menu , it doesn't drop down to show the sub menu.


I have added a sample of the json response i am to use to build the menu and also the function i am using..

Also i have added a sample of how my html looks like

What I have tried:

{
    status: "Success",
    menus: [
    {
    menu_icon: null,
    menu_name: "Stock",
    submenu: [
    {
    menu_name: "Manage Stocks",
    controller_name: "ManageStocks",
    action_name: "ManageStocks"
    }
    ]
    },
    {
    menu_icon: null,
    menu_name: "Property",
    submenu: [
    {
    menu_name: "Manage Property",
    controller_name: "ManageProperty",
    action_name: "ManageProperty"
    }
    ]
    }
    ]
    }

<ul class="nav nav-main" id="menuList">
                <li class="nav-parent">
                    <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">
                        class="fa fa-home">
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="nav-parent">
                    <a class="nav-link" href="#">
                        <span>Pages</span>
                    </a>
                    <ul class="nav nav-children">
                        <li>
                            <a class="nav-link" href="pages-signup.html">
                                Sign Up
                            </a>
                        </li>
                    </ul>
                </li></ul>

function buildMenu(parent, item) {
           $.each(item, function () {
               var li = $('<li class="nav-parent"><a class="nav-link" href="#"><span>' + this.menu_name + '</span></a></li>');
               li.appendTo(parent);
               if (this.submenu != null) {
                   var ul = $('<ul class="nav nav-children"></ul>');
                   ul.appendTo(li);
                   buildMenu($(ul), this.submenu);
               }

           });
       };