How to convert Html nested list <ul></ul> to javascript Array
<p>I have a list structure as below, I want to convert this to a javascript Array</p>

<p>I have nested Ul Li elements which are used to create menu structure.</p>

<p>I am creating the HTML list from server side. Which I want to give as a item source of a Jquery menu Items</p>

<p>refer <a href="https://swisnl.github.io/jQuery-contextMenu" rel="nofollow">Menu</a></p>

<pre><code>&lt;ul&gt; 
&lt;li data-command="btnCmdClick1"&gt;        
    Menu1
&lt;/li&gt;
&lt;li data-command="btnCmdClick2"&gt;        
    Menu2
&lt;/li&gt;
&lt;li data-command="btnCmdClick3"&gt;        
    Menu3
&lt;/li&gt;
&lt;li data-command="btnCmdClick4"&gt;
    &lt;ul&gt; Sub Menu1          
        &lt;li data-command="btnCmdClick5"&gt;
            Menu1
        &lt;/li&gt;
        &lt;li data-command="btnCmdClick6"&gt;
                &lt;ul&gt; Sub Sub Menu           
                    &lt;li data-command="btnCmdClick7"&gt;
                        Menu1
                    &lt;/li&gt;
                    &lt;li data-command="btnCmdClick8"&gt;
                        Menu2
                    &lt;/li&gt;
                    &lt;li data-command="btnCmdClick9"&gt;
                        Menu3
                    &lt;/li&gt;           
                &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li data-command="btnCmdClick10"&gt;
            Menu3
        &lt;/li&gt;           
    &lt;/ul&gt;
&lt;/li&gt;   
&lt;li data-command="btnCmdClick11"&gt;
        &lt;ul&gt; Sub Menu2          
            &lt;li data-command="btnCmdClick12"&gt;
                Menu1
            &lt;/li&gt;
            &lt;li data-command="btnCmdClick13"&gt;
                Menu2
            &lt;/li&gt;
            &lt;li data-command="btnCmdClick14"&gt;
                Menu3
            &lt;/li&gt;           
        &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p></p>

<p>I want Array Exactly like this</p>

<pre><code>var items = {
            "btnCmdClick1": { "name": "Menu1", "icon": "" },
            "btnCmdClick2": { "name": "Menu2", "icon": "" },
            "btnCmdClick3": { "name": "Menu3", "icon": "" },
            "btnCmdClick4": {
                "name": "Sub Menu1",
                "items": {
                    "btnCmdClick5": { "name": "Menu1" , "icon": "" },
                    "btnCmdClick6": {
                        "name": "Sub Sub Menu",
                        "items": {
                            "btnCmdClick7": { "name": "Menu1", "icon": "" },
                            "btnCmdClick8": { "name": "Menu2", "icon": "" },
                            "btnCmdClick9": { "name": "Menu3", "icon": "" }
                        }
                    },
                    "btnCmdClick10": { "name": "Menu3", "icon": "" }
                }
            },
            "btnCmdClick11": {
                "name": "Sub Menu2",
                "items": {
                            "btnCmdClick12": { "name": "Menu1", "icon": "" },
                            "btnCmdClick13": { "name": "Menu2", "icon": "" },
                            "btnCmdClick14": { "name": "Menu3", "icon": "" }
                }
            }
        };
</code></pre>

<p>Please Help`
Actually Implementing this <a href="https://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html" rel="nofollow">Right Click Context menu</a></p>