我有一个嵌套的无序列表，我希望从JSON文件中动态获取内容，而不是用HTML编写。为此我知道我需要一些脚本，但我不确切。
我已经在HTML中构建了当前列表，而 Punkler 的JSON文件却错过了该脚本。
HTML ...
<ul>
<!-- ARIZONA -->
<li>
<p>Arizona</p>
<ul>
<li>
<p>Phoenix</p>
<ul>
<li>
<h1>Store 1</h1>
<p>Store 1 Address</p>
<p>Phoenix - AZ</p>
<a href="http://store_1_address.com/">View Map</a>
</li>
<li>
<h1>Store 2</h1>
<p>Store 2 Address</p>
<p>Phoenix - AZ</p>
<a href="http://store_2_address.com/">View Map</a>
</li>
<li>
<h1>Store 3</h1>
<p>Store 3 Address</p>
<p>Phoenix - AZ</p>
<a href="http://store_3_address.com/">View Map</a>
</li>
</ul>
</li>
<li>
<p>Tucson</p>
<ul>
<li>
<h1>Store 4</h1>
<p>Store 4 Address</p>
<p>Tucson - AZ</p>
<a href="http://store_4_address.com/">View Map</a>
</li>
<li>
<h1>Store 5</h1>
<p>Store 5 Address</p>
<p>Tucson - AZ</p>
<a href="http://store_5_address.com/">View Map</a>
</li>
<li>
<h1>Store 6</h1>
<p>Store 6 Address</p>
<p>Tucson - AZ</p>
<a href="http://store_6_address.com/">View Map</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- CALIFORNIA -->
<li>
<p>California</p>
<ul>
<li>
<p>Los Angeles</p>
<ul>
<li>
<h1>Store 7</h1>
<p>Store 7 Address</p>
<p>Los Angeles - CA</p>
<a href="http://store_7_address.com/">View Map</a>
</li>
<li>
<h1>Store 8</h1>
<p>Store 8 Address</p>
<p>Los Angeles - CA</p>
<a href="http://store_8_address.com/">View Map</a>
</li>
<li>
<h1>Store 9</h1>
<p>Store 9 Address</p>
<p>Los Angeles - CA</p>
<a href="http://store_9_address.com/">View Map</a>
</li>
</ul>
</li>
<li>
<p>San Francisco</p>
<ul>
<li>
<h1>Store 10</h1>
<p>Store 10 Address</p>
<p>San Francisco - CA</p>
<a href="http://store_10_address.com/">View Map</a>
</li>
<li>
<h1>Store 11</h1>
<p>Store 11 Address</p>
<p>San Francisco - CA</p>
<a href="http://store_11_address.com/">View Map</a>
</li>
<li>
<h1>Store 12</h1>
<p>Store 12 Address</p>
<p>San Francisco - CA</p>
<a href="http://store_12_address.com/">View Map</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- TEXAS -->
<li>
<p>Texas</p>
<ul>
<li>
<p>Austin</p>
<ul>
<li>
<h1>Store 13</h1>
<p>Store 13 Address</p>
<p>Austin - TX</p>
<a href="http://store_13_address.com/">View Map</a>
</li>
<li>
<h1>Store 14</h1>
<p>Store 14 Address</p>
<p>Austin - TX</p>
<a href="http://store_14_address.com/">View Map</a>
</li>
<li>
<h1>Store 15</h1>
<p>Store 15 Address</p>
<p>Austin - TX</p>
<a href="http://store_15_address.com/">View Map</a>
</li>
</ul>
</li>
<li>
<p>Houston</p>
<ul>
<li>
<h1>Store 16</h1>
<p>Store 16 Address</p>
<p>Houston - TX</p>
<a href="http://store_16_address.com/">View Map</a>
</li>
<li>
<h1>Store 17</h1>
<p>Store 17 Address</p>
<p>Houston - TX</p>
<a href="http://store_17_address.com/">View Map</a>
</li>
<li>
<h1>Store 18</h1>
<p>Store 18 Address</p>
<p>Houston - TX</p>
<a href="http://store_18_address.com/">View Map</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON ...
{
"states": [{
"name": "Arizona",
"state_abbreviation": "AZ",
"city": [
{
"name": "Phoenix",
"stores": [
{ "name": "Store 1", "address": "Store 1 Address", "map": "http://store_1_address.com/" },
{ "name": "Store 2", "address": "Store 2 Address", "map": "http://store_2_address.com/" },
{ "name": "Store 3", "address": "Store 3 Address", "map": "http://store_3_address.com/" }
]
},
{
"name": "Tucson",
"stores": [
{ "name": "Store 4", "address": "Store 4 Address", "map": "http://store_4_address.com/" },
{ "name": "Store 5", "address": "Store 5 Address", "map": "http://store_5_address.com/" },
{ "name": "Store 6", "address": "Store 6 Address", "map": "http://store_6_address.com/" }
]
}
],
"name": "California",
"state_abbreviation": "CA",
"city": [
{
"name": "Los Angeles",
"stores": [
{ "name": "Store 7", "address": "Store 7 Address", "map": "http://store_7_address.com/" },
{ "name": "Store 8", "address": "Store 8 Address", "map": "http://store_8_address.com/" },
{ "name": "Store 9", "address": "Store 9 Address", "map": "http://store_9_address.com/" }
]
},
{
"name": "San Francisco",
"stores": [
{ "name": "Store 10", "address": "Store 10 Address", "map": "http://store_10_address.com/" },
{ "name": "Store 11", "address": "Store 11 Address", "map": "http://store_11_address.com/" },
{ "name": "Store 12", "address": "Store 12 Address", "map": "http://store_12_address.com/" }
]
}
],
"name": "Texas",
"state_abbreviation": "TX",
"city": [
{
"name": "Austin",
"stores": [
{ "name": "Store 13", "address": "Store 13 Address", "map": "http://store_13_address.com/" },
{ "name": "Store 14", "address": "Store 14 Address", "map": "http://store_14_address.com/" },
{ "name": "Store 15", "address": "Store 15 Address", "map": "http://store_15_address.com/" }
]
},
{
"name": "Houston",
"stores": [
{ "name": "Store 16", "address": "Store 16 Address", "map": "http://store_16_address.com/" },
{ "name": "Store 17", "address": "Store 17 Address", "map": "http://store_17_address.com/" },
{ "name": "Store 18", "address": "Store 18 Address", "map": "http://store_18_address.com/" }
]
}
]
}]
}
感谢您帮助我！
答案 0 :(得分：2)
你只需要循环。建立一个字符串。循环的基本思想。
var states = yourJSON.states;
states.forEach( function (state) {
console.log("\t" + state.name);
var cities = state.city;
cities.forEach( function (city) {
console.log("\t\t" + city.name);
var stores = city.stores;
stores.forEach( function (store) {
console.log("\t\t\t" + store.name);
});
});
});
答案 1 :(得分：2)
在plunker中，你提到json不是有效的json格式。首先解决这些JSON错误并尝试下面的代码：
var states = json.states;
var tempHtml = '<ul>';
for(state in states){
tempHtml += "<li><p>"+state.name+"</p><ul>";
for(city in state.city){
tempHtml += "<li><p>"+city.name+"</p><ul>";
for(store in city.stores){
tempHtml += "<li><h1>"+store.name+"</h1><p>"+store.address+"</p><a href='"+store.map+"'>view map</a></li>";
}
tempHtml += "</ul></li>";
}
tempHtml += "</ul></li>";
}
tempHtml += "</ul>";
$('#divid').html(tempHtml);