如何轻松地将多维JSON解析为html? [英] How to parse multidimensional JSON to html easily?
本文介绍了如何轻松地将多维JSON解析为html?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想轻松地将json解析为html.我有一个多维json.所以我想轻松地将此解析为html.有任何插件或任何简单的代码可用吗? 以下是我的json文件.
I want to parse json to html easily. I have a multidimensional json. so i want to parse this to html easily. any plugin or any simple code is available ? The following my json file.
[
{
"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>
我想要这样的输出 哪个是获得此输出的最佳和最简单的方法?
I want to get output like this Which is best and simplest way to get this output?
推荐答案
您可以使用jquery jput插件( http: //plugins.jquery.com/jput/)
You can use jquery jput plugin (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>
这篇关于如何轻松地将多维JSON解析为html?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文