Home/ Questions/Q 7806521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T02:33:48+00:00

What I want is to loop the data from database and create the menu,

  • 0

What I want is to loop the data from database and create the menu, if each content of the menu
have the sub menu, then it will show the sub menu as :

<ul>
<li>test1</li>
<li>test2</li>
<li>test3
    <ul>
       <li>sub menu1</li>
       <li>sub menu2</li>
    </ul>
</li>
</ul>

I create the menu with the Jquery as below :

$(document).ready(function () {
 $.getJSON(url, function (data) {
    $.each(data, function (index, dataOption) {
        $("#navmenu-v").append("<li id='testList'>
            <a href='javascript:void(0);' id='" + dataOption.ID + "'>" +
                    dataOption.Name + "</a>");
            if (dataOption.NumCat > 0) { //NumCat is the amount of sub menu
              $("#testList").append("<ul><li><a>Testing cate</a></li></ul>");
            }
        $("#navmenu-v").append("</li>");
    });
  });
  });

  <div id="content">
     <ul id='navmenu-v'>

     </ul>
   </div>

But the “Testing cate” shows only in the first list of the menu.

Could anyone tell me how to do that please. Thanks so much.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [{ 'ID': 1, 'Name': 'A', 'NumCat': [{ 'ID': 1, 'Name': 'a' }, { 'ID': 2, 'Name': 'b' }, { 'ID': 3, 'Name': 'c'}] }, { 'ID': 2, 'Name': 'B', 'NumCat': [{ 'ID': 1, 'Name': 's'}] }, { 'ID': 3, 'Name': 'C', 'NumCat': [{ 'ID': 8, 'Name': 'r' }, { 'ID': 9, 'Name': 'y'}] }, { 'ID': 4, 'Name': 'D', 'NumCat': []}];

            if (data.length > 0) {
                $('#content').append('<ul id="navmenu-v"></ul>');

                $.each(data, function (index, dataMenu) {
                    var stringBuilder = [];
                    stringBuilder.push('<li class="testList"><a href="javascript:void(0);" id="' + dataMenu.ID + '">' + dataMenu.Name + '</a>');

                    if (dataMenu.NumCat.length > 0) { //NumCat is the amount of sub menu
                        stringBuilder.push('<ul>');
                        $.each(dataMenu.NumCat, function (i, dataSubmenu) {
                            stringBuilder.push('<li><a>' + dataSubmenu.Name + '</a></li>');
                        });
                        stringBuilder.push('</ul>');
                    }

                    stringBuilder.push('</li>');

                    $('#navmenu-v').append(stringBuilder.join(''));
                });
            }



            // Or ( Above is for testing... )


            //            var url="/home/getmenulist"; // give u r url path here.

            //            $.getJSON(url, function (data) {
            //                if (data.length > 0) {
            //                    $('#content').append('<ul id="navmenu-v"></ul>');

            //                    $.each(data, function (index, dataMenu) {
            //                        var stringBuilder = [];
            //                        stringBuilder.push('<li class="testList"><a href="javascript:void(0);" id="' + dataMenu.ID + '">' + dataMenu.Name + '</a>');

            //                        if (dataMenu.NumCat.length > 0) { //NumCat is the amount of sub menu
            //                            stringBuilder.push('<ul>');
            //                            $.each(dataMenu.NumCat, function (i, dataSubmenu) {
            //                                stringBuilder.push('<li><a>' + dataSubmenu.Name + '</a></li>');
            //                            });
            //                            stringBuilder.push('</ul>');
            //                        }

            //                        stringBuilder.push('</li>');

            //                        $('#navmenu-v').append(stringBuilder.join(''));
            //                    });
            //                }
            //            });
        });
    </script>
</head>
<body>
    <div id="content">
    </div>
</body>
</html>
    • 0