javascript - How do I create HTML navigation using JSON structure

Question

While I have created basic HTML navigation using Javascript/CSS, I need to create the following navigation using the JSON structure;

So the nav should look like;

enter image description here

The JSON structure is as follows;

{
   "general":{
      "logo":"assets/images/logo.png",
      "name" : "Company Name"
   },
   "navigation":[
      {
         "title":"Home",
         "link":"index.html"
      },
      {
         "title":"Products",
         "link":"product.html",
         "subnav":[
            {
               "title":"Webapps",
               "link":"products/webapps.html"
            },
            {
               "title":"Mobile Apps",
               "link":"products/mobile-apps.html"
            }
         ]
      }
   ]
}

How do I create the HTML using the JSON structure;

The navigation comprises of data for a multiple level navigation. The placeholder will define where the navigation appears, so it could appear in multiple places also. Also the DOM should be created using JS and JS should be unobtrusive.

Please help me. I am not looking at actual code, but links to similar examples for reference would be really helpful...I just need the steps/hints to achieve it.

Thank you.

Example HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<meta name="Generator" content="Microsoft Word 15 (filtered)">
<style>
<!--
 /* Font Definitions */
 @font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:"Segoe UI";
    panose-1:2 11 5 2 4 2 4 2 2 3;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
a:link, span.MsoHyperlink
    {color:blue;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {color:purple;
    text-decoration:underline;}
p
    {margin:0in;
    margin-bottom:.0001pt;
    font-size:10.5pt;
    font-family:"Arial",sans-serif;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
    {margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msonormal0, li.msonormal0, div.msonormal0
    {mso-style-name:msonormal;
    margin:0in;
    margin-bottom:.0001pt;
    font-size:10.5pt;
    font-family:"Arial",sans-serif;}
p.msolistparagraphcxspfirst, li.msolistparagraphcxspfirst, div.msolistparagraphcxspfirst
    {mso-style-name:msolistparagraphcxspfirst;
    margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msolistparagraphcxspmiddle, li.msolistparagraphcxspmiddle, div.msolistparagraphcxspmiddle
    {mso-style-name:msolistparagraphcxspmiddle;
    margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msolistparagraphcxsplast, li.msolistparagraphcxsplast, div.msolistparagraphcxsplast
    {mso-style-name:msolistparagraphcxsplast;
    margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msochpdefault, li.msochpdefault, div.msochpdefault
    {mso-style-name:msochpdefault;
    margin:0in;
    margin-bottom:.0001pt;
    font-size:10.0pt;
    font-family:"Arial",sans-serif;}
.MsoChpDefault
    {font-size:10.0pt;}
@page WordSection1
    {size:8.5in 11.0in;
    margin:1.0in 1.0in 0in 1.0in;}
div.WordSection1
    {page:WordSection1;}
-->
</style>

</head>

<body lang="EN-US" link="blue" vlink="purple">

<div class="WordSection1" style="page: WordSection1;">

<div align="center">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;background:white;border-collapse:collapse">
 <tr>
  <td width="100%" valign="top" style="width:100.0%;padding:0in 0in 0in 0in">
  <div align="center">
  <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;border-collapse:collapse">
   <tr>
    <td width="100%" style="width:100.0%;padding:0in 0in 0in 0in">
    <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;border-collapse:collapse">
     <tr>
      <td style="background:#E7E6E6;padding:0in 0in 0in 0in">
      <div align="center">
      <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
       <tr>
        <td width="608" style="width:456.05pt;padding:.75pt .75pt .75pt .75pt">
        <div align="center">
        <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="606" style="width:454.55pt;border-collapse:collapse">
         <tr style="height:472.5pt">
          <td width="100%" style="width:100.0%;background:white;padding:0in 0in 0in 0in;
          height:472.5pt">
          <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="606" style="width:454.55pt;border-collapse:collapse">
           <tr style="display:none;height:91.8pt">
            <td width="606" style="width:454.55pt;padding:0in 0in 0in 0in;
            height:91.8pt">
            <p style="margin-top: 0in;margin-right: 12.45pt;margin-bottom: .0001pt;margin-left: 10.25pt;margin: 0in;font-size: 10.5pt;font-family: &quot;Arial&quot;,sans-serif;"><span style="font-size:
            10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838;display:
            none">Corporate Account Request<u7:p></u7:p></span><span style="display:none"><u8:p></u8:p><u9:p></u9:p><u10:p></u10:p><u11:p></u11:p><u12:p></u12:p><u13:p></u13:p><u14:p></u14:p><u15:p></u15:p><u16:p></u16:p></span></p>
            </td>
           </tr>
           <tr style="height:17.65pt">
            <td width="606" valign="top" style="width:454.55pt;background:#222B33;
            padding:25.5pt 0in 25.5pt 0in;height:17.65pt">
            <p class="MsoNormal" align="center" style="margin-top: 0in;margin-right: 16.95pt;margin-bottom: .0001pt;margin-left: 46.25pt;text-align: center;text-indent: -31.5pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><u7:p><span style="font-size:16.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;
            color:#E7E6E6"><img width="161" height="36" src="https://marketing-image-production.s3.amazonaws.com/uploads/9e9ac490a745058ed56bbe763644cd76fc608a7dc85d61c0d29a580e7bdd34588ed8b2aea42c524a856597cf5460a1c05dd3abf14743e75be743ef7dc8c4425e.png" alt="Bittrex Logo"></span></u7:p></p>
            </td>
           </tr>
          </table>
          <p class="MsoNormal" align="center" style="margin-top: 0in;margin-right: 16.95pt;margin-bottom: .0001pt;margin-left: 46.25pt;text-align: center;text-indent: -31.5pt;margin: 0in;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:16.0pt;
          font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u7:p><u12:p>&nbsp;</u12:p></u7:p></span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center; margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:16.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;
          color:#3B3838"><u10:p></u10:p>Existing Bittrex Customer Fiat (USD)
          Trading</span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center; margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:16.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;
          color:#3B3838">Request Received<u10:p></u10:p></span><u17:p></u17:p></p>
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center;margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-family:&quot;Segoe UI&quot;,sans-serif">&nbsp;</span></p>
          <u15:p></u15:p>

          <!-- START SECTION 1 -->
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>Thank
          You For Your US Dollar Trading Request</b></span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;</span></p>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Bittrex support will respond to your request within 7 business days                   
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                USD trading is now available for both <b>personal and corporate accounts</b>
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Only customers with operating location <b>outside the United States</b> or inside the United States in <b>CA, WA, NY, or MT</b> currently qualify for USD trading. We cannot approve accounts located in any other US state at this time but we will add more states soon.                    
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  You will receive email confirmation upon approval with more information. If you requested USD deposits and withdrawals in addition to USD trading, your confirmation email <b>will include wire transfer instructions</b>
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  If you are only adding a whitelisted bank account, you will receive confirmation when that bank account has been added to your account                    
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Follow Bittrex on Twitter for new market announcements (crypto
          and USD) as well as new US states that qualify for fiat (US Dollar)
          trading: <a href="https://twitter.com/BittrexExchange">https://twitter.com/BittrexExchange</a>                
              </div>
          </div>
          <div style="clear: both"></div>

          <!-- END SECTION 1 -->

          <!-- START SECTION 2 -->
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;</span><u17:p></u17:p></p>
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>API Integration Updates</b></span></p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u10:p>&nbsp;</u10:p></span><u17:p></u17:p></p>

          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Please note that we have updated our API with the release of our new site                 
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  For those accessing Bittrex via API, visit </span><span
          style='color:blue'><a href="https://bittrex.github.io/">https://bittrex.github.io/</a></span><span
          style='color:#3B3838'> for recent updates regarding our Websocket.
          Please bookmark, as future API (REST and Websocket) documentation and
          best practices will be posted to that site. 
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  If you are not already a member of our #api-developers Slack channel,
          please search for that channel in our Slack or email </span><span
          style='color:blue'><a href="mailto:corpcare@bittrex.com">corpcare@bittrex.com</a></span><span
          style='color:#3B3838'> to receive an invitation to the Bittrex Slack
          (if you are not already a member). Corporate accounts and high volume
          personal accounts can receive an invitation. Our developer community
          is growing as we actively improve the API experience.
              </div>
          </div>
          <div style="clear: both"></div>
          <!-- END SECTION 2 -->

          <!-- START SECTION 3 -->
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;</span><u17:p></u17:p></p>
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>Future Support Requests</b></span></p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u10:p>&nbsp;</u10:p></span><u17:p></u17:p></p>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  <b>Submit a support requests and view support articles and blog here:</b>
                  <a href="https://support.bittrex.com/"><u11:p></u11:p><u18:p></u18:p>https://support.bittrex.com/</a>               
              </div>
          </div>
          <div style="clear: both"></div>         
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  <b>Sign in to support.bittrex.com and click on "my activities" to reference this ticket</b>
                  <a href="https://support.bittrex.com/hc/en-us/signin">https://support.bittrex.com/hc/en-us/signin</a>
              </div>
          </div>
          <div style="clear: both"></div>         
          <!-- END SECTION 3 -->

          <!-- START SECTION 4 -->
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center;margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-family:&quot;Segoe UI&quot;,sans-serif">&nbsp;</span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>Thank you and
          Happy Trading!</b></span></p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u10:p>&nbsp;</u10:p></span><u17:p></u17:p></p>
          <!-- END SECTION 4 -->

          </td>
         </tr>
        </table>
        </div>
        </td>
       </tr>
      </table>
      </div>
      </td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </div>
  </td>
 </tr>
</table>

</div>

<p class="MsoNormal" style="margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif"><u7:p>&nbsp;</u7:p></span><u12:p></u12:p><u14:p></u14:p><u15:p></u15:p><u16:p></u16:p></p>

<u13:p></u13:p></div>

<u10:p></u10:p>
</body>

</html>

score 3 · Accepted Answer

只是为了尝试一些新的东西，下面是我使用 JavaScript 模板语言Handlebars.js的方法：

<nav id="nav"></nav>

<script id="nav-template" type="text/x-handlebars-template">
    <ul class="nav">
        {{#each navigation}}
            <li><a href="{{ link }}">{{ title }}</a></li>

            {{#if subnav}}
                <ul class="subnav">
                    {{#each subnav}}
                       <li><a href="{{ link }}">{{ title }}</a></li>
                    {{/each}}
                </ul>
            {{/if}}
        {{/each}}
    </ul>
</script>

还有你的 JavaScript：

var template = Handlebars.compile($("#nav-template").html());

$('#nav').html(template(data));

演示：http: //jsfiddle.net/L8wSB/

score 0 · Accepted Answer

您可以参考以下网址，它将对您有所帮助 http://www.jqwidgets.com/building-menu-from-json/

javascript - How do I create HTML navigation using JSON structure

2 回答 2

Related

Reference