我想轻松地将 json 解析为 html。我有一个多维 json。所以我想轻松地将其解析为 html。有任何插件或任何简单的代码可用吗? 以下是我的 json 文件。
[
{
"country": "India",
"state": [
{
"name": "Delhi",
"capital": "New Delhi"
},
{
"name": "Tamilnadu",
"capital": "Chennai"
}
]
},
{
"country": "USA",
"state": [
{
"name": "Alabama",
"capital": "Montgomery"
},
{
"name": "Alaska",
"capital": "Juneau"
}
]
}
]
html是这样的。
<ul>
<li>India</li>
<ul>
<li>State1 :capital</li>
<li>State2 :capita2</li>
</ul>
<li>USA</li>
<ul>
<li>State1 :capital</li>
<li>State2 :capita2</li>
</ul>
</ul>
我想得到这样的输出 哪种是获得此输出的最佳且最简单的方法?
最佳答案
您可以使用 jquery jput 插件 ( http://plugins.jquery.com/jput/ )
http://jsfiddle.net/mse255ko/1/
var data=[
{
"country": "India",
"state": [
{
"name": "Delhi",
"capital": "New Delhi"
},
{
"name": "Tamilnadu",
"capital": "Chennai"
}
]
},
{
"country": "USA",
"state": [
{
"name": "Alabama",
"capital": "Montgomery"
},
{
"name": "Alaska",
"capital": "Juneau"
}
]
}
];
$(document).ready(function(){
//loading json data initally
$('#maindiv').jPut({
jsonData:data,
name:'template1'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://shabeer-ali-m.github.io/jPut/js/jput.min.js"></script>
<div id="maindiv">
<div jput="template1">
<ul>
<li>{{country}}</li>
<ul>
<li>State 1 Name : {{state.0.name}}, Capital : {{state.0.capital}}</li>
<li>State 2 Name : {{state.1.name}}, Capital : {{state.1.capital}}</li>
</ul>
</ul>
</div>
</div>
关于jquery - 如何轻松将多维JSON解析为html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26031010/