虽然我使用 Javascript/CSS 创建了基本的 HTML 导航，但我需要使用 JSON 结构创建以下导航；
所以导航应该看起来像；
JSON结构如下；
{
"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"
}
]
}
]
}
如何使用 JSON 结构创建 HTML；
导航包含用于多级导航的数据。占位符将定义导航出现的位置，因此它也可以出现在多个位置。此外，DOM 应该使用 JS 创建，并且 JS 应该不引人注目。
请帮助我。我没有查看实际的代码，但是指向类似示例的链接以供引用将非常有帮助......我只需要步骤/提示来实现它。
谢谢。
示例 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: "Arial",sans-serif;"><span style="font-size:
10.0pt;font-family:"Segoe UI",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: "Times New Roman",serif;"><u7:p><span style="font-size:16.0pt;font-family:"Segoe UI",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: "Times New Roman",serif;"><span style="font-size:16.0pt;
font-family:"Segoe UI",sans-serif;color:#3B3838"><u7:p><u12:p> </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: "Times New Roman",serif;"><span style="font-size:16.0pt;font-family:"Segoe UI",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: "Times New Roman",serif;"><span style="font-size:16.0pt;font-family:"Segoe UI",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: "Times New Roman",serif;"><span style="font-family:"Segoe UI",sans-serif"> </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: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <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:"Segoe UI",sans-serif;color:#3B3838"> </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:"Segoe UI",sans-serif;color:#3B3838"> </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: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>API Integration Updates</b></span></p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"><u10:p> </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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efdf1eceefdffecfbdefcf7eaeaecfbe6b0fdf1f3" rel="noreferrer noopener nofollow">[email protected]</a>"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88ebe7faf8ebe9faedc8eae1fcfcfaedf0a6ebe7e5" rel="noreferrer noopener nofollow">[email protected]</a></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:"Segoe UI",sans-serif;color:#3B3838"> </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: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>Future Support Requests</b></span></p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"><u10:p> </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: "Times New Roman",serif;"><span style="font-family:"Segoe UI",sans-serif"> </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: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>Thank you and
Happy Trading!</b></span></p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"><u10:p> </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: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif"><u7:p> </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>
最佳答案
只是为了尝试一些新的东西，这就是我使用 Handlebars.js 的方法。 ，一种 JavaScript 模板语言:
<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));
关于javascript - 如何使用 JSON 结构创建 HTML 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14556631/