Creating a menu as nested unordered lists from JSON data I have a JSON input using which I have written below function to recursively create an unordered list.

Is there more precise way to achieve it?



$(document).ready(function () {
        var htmlTxt = "";
        var cat = [];
        var htmlStrTxt = "";
        var url = "#";

        function recurseMenu(parent, level) {
            htmlStrTxt = '&lt;ul&gt;';
            for (var x in menuItems) {
                if (menuItems[x].parentId == parent) {
                    htmlStrTxt += '&lt;li&gt;&lt;img/&gt;&lt;a href="' + url + '"&gt;' + menuItems[x].title + '&lt;/a&gt;';

                    if (menuItems[x].childCount &gt; 0) {
                        htmlStrTxt += recurseMenu(menuItems[x].id, level + 1);
                    }
                    htmlStrTxt += '&lt;/li&gt;';
                }
            }
            return htmlStrTxt + '&lt;/ul&gt;';
        }

        var htmlTxt = recurseMenu(null, 0);
        $("#listContainer").html(htmlTxt);
     });
&lt;!-- Test case --&gt;
&lt;div id="listContainer"&gt;&lt;/div&gt;
&lt;script&gt;
var menuItems = {
        "menu-0": {
            "id": "menu-0",
            "title": "Home",
            "parentId": null,
            "childCount": 0
        },
        "menu-1": {
            "id": "menu-1",
            "title": "About",
            "parentId": null,
            "childCount": 2
        },
        "menu-3": {
            "id": "menu-3",
            "title": "About Sub1",
            "parentId": "menu-1",
            "childCount": 2
        },
        "menu-5": {
            "id": "menu-5",
            "title": "About Sub2",
            "parentId": "menu-1",
            "childCount": 0
        },
        "menu-4": {
            "id": "menu-4",
            "title": "About Sub1 sub1",
            "parentId": "menu-3",
            "childCount": 0
        },
        "menu-6": {
            "id": "menu-6",
            "title": "Contact",
            "parentId": null,
            "childCount": 2
        },
        "menu-7": {
            "id": "menu-7",
            "title": "Contact sub1",
            "parentId": "menu-6",
            "childCount": 0
        },
        "menu-8": {
            "id": "menu-8",
            "title": "Contact sub2",
            "parentId": "menu-6",
            "childCount": 1
        },
        "menu-9": {
            "id": "menu-9",
            "title": "Contact sub2 sub1",
            "parentId": "menu-8",
            "childCount": 0
        },
        "menu-10": {
            "id": "menu-10",
            "title": "About Sub1 sub2",
            "parentId": "menu-3",
            "childCount": 2
        },
        "menu-11": {
            "id": "menu-11",
            "title": "About Sub1 sub2 sub1",
            "parentId": "menu-10",
            "childCount": 0
        } ,
        "menu-12": {
            "id": "menu-11",
            "title": "About Sub1 sub2 sub2",
            "parentId": "menu-10",
            "childCount": 0
        }
      };
&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
At the very least, you should clean up your variables:


htmlTxt is declared as var twice in the same scope.  I don't think you even need it at all.
cat is never used.
htmlStrTxt would be better as a local function within recurseMenu().  A shorter variable name would do just as well.
The level parameter is useless.




$(document).ready(function () {
        var url = "#";

        function recurseMenu(parent) {
            var s = '&lt;ul&gt;';
            for (var x in menuItems) {
                if (menuItems[x].parentId == parent) {
                    s += '&lt;li&gt;&lt;img/&gt;&lt;a href="' + url + '"&gt;' + menuItems[x].title + '&lt;/a&gt;';

                    if (menuItems[x].childCount &gt; 0) {
                        s += recurseMenu(menuItems[x].id);
                    }
                    s += '&lt;/li&gt;';
                }
            }
            return s + '&lt;/ul&gt;';
        }

        $("#listContainer").html(recurseMenu());
     });
&lt;!-- Test case --&gt;
&lt;div id="listContainer"&gt;&lt;/div&gt;
&lt;script&gt;
var menuItems = {
        "menu-0": {
            "id": "menu-0",
            "title": "Home",
            "parentId": null,
            "childCount": 0
        },
        "menu-1": {
            "id": "menu-1",
            "title": "About",
            "parentId": null,
            "childCount": 2
        },
        "menu-3": {
            "id": "menu-3",
            "title": "About Sub1",
            "parentId": "menu-1",
            "childCount": 2
        },
        "menu-5": {
            "id": "menu-5",
            "title": "About Sub2",
            "parentId": "menu-1",
            "childCount": 0
        },
        "menu-4": {
            "id": "menu-4",
            "title": "About Sub1 sub1",
            "parentId": "menu-3",
            "childCount": 0
        },
        "menu-6": {
            "id": "menu-6",
            "title": "Contact",
            "parentId": null,
            "childCount": 2
        },
        "menu-7": {
            "id": "menu-7",
            "title": "Contact sub1",
            "parentId": "menu-6",
            "childCount": 0
        },
        "menu-8": {
            "id": "menu-8",
            "title": "Contact sub2",
            "parentId": "menu-6",
            "childCount": 1
        },
        "menu-9": {
            "id": "menu-9",
            "title": "Contact sub2 sub1",
            "parentId": "menu-8",
            "childCount": 0
        },
        "menu-10": {
            "id": "menu-10",
            "title": "About Sub1 sub2",
            "parentId": "menu-3",
            "childCount": 2
        },
        "menu-11": {
            "id": "menu-11",
            "title": "About Sub1 sub2 sub1",
            "parentId": "menu-10",
            "childCount": 0
        } ,
        "menu-12": {
            "id": "menu-11",
            "title": "About Sub1 sub2 sub2",
            "parentId": "menu-10",
            "childCount": 0
        }
      };
&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;