title: Build dynamic sub menu from JSON data using JQuery?
body: <p>I want to build sub menu for menu item from json data.</p>
  
  <h2>Menu</h2>
  
  <pre><code>  &lt;div class="subnav-fixed" id="menuContrainer" runat="server"&gt;
          &lt;ul class="nav nav-pills"&gt;
             &lt;li id="Li0"&gt;&lt;a href="Default.aspx"&gt;Home &lt;/li&gt;
             &lt;li id="Li1"&gt;&lt;a href="InitiativeGrid.aspx"&gt;Initiative&lt;/a&gt;&lt;/li&gt;
             &lt;li id="Li2"&gt;&lt;a href="Reports.aspx"&gt;Reports&lt;/a&gt;&lt;/li&gt;
             &lt;li id="Li3"&gt;&lt;a href="EditInitiative.aspx"&gt;Edit Initiatives&lt;/a&gt;&lt;/li&gt;            
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <h2>JSON</h2>
  
  <pre><code>data =
      "{"d":[
          {"__type":"Tableau_Reports:#CostReductionData",
              "ClientIdx":1,
              "GroupName":"HR",
              "ReportGroup":"1",
              "ReportHeight":"800",
              "ReportName":"Baseline Vs Active Employees",
              "ReportOrder":"0",
              "ReportUrl":"https://company.com/t/sga/views/HRReports/BaselineandActiveEmployees"
          },
          {"__type":"Tableau_Reports:#CostReductionData",
              "ClientIdx":1,
              "GroupName":"HR",
              "ReportGroup":"1",
              "ReportHeight":"800",
              "ReportName":"Level vs Direct Reports",
              "ReportOrder":"0",
              "ReportUrl":"https://company.com/t/sga/views/HRReports/LevelvsDirectReports"
          },
          {"__type":"Tableau_Reports:#Alixpartners.SGACostReductionData",
              "ClientIdx":1,
              "GroupName":"Finance",
              "ReportGroup":"2",
              "ReportHeight":"800",
              "ReportName":"Spans and Layers",
              "ReportOrder":"0",
              "ReportUrl":"https://company.com/t/sga/views/HRReports/SpansandControl"
          }]
      }"  
  </code></pre>
  
  <p>I want to display  sub menu for Report menu Item like this</p>
  
  <pre><code>Home Initiative Reports Edit Initiative
                    |
                    HR- Baseline Vs Active Employees
                      - Level vs Direct Reports
                    |
                    Finance - Spans and Layers
  </code></pre>
  
  <p>How can we do this with Jquery?</p>