如何轻松地将多维 JSON 解析为 html？
Posted
技术标签:
【中文标题】如何轻松地将多维 JSON 解析为 html？【英文标题】：How to parse multidimensional JSON to html easily? 【发布时间】：2014-11-19 18:42:39 【问题描述】：我想轻松地将 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>
我想得到这样的输出 获得此输出的最佳和最简单的方法是什么？
【问题讨论】：
它应该是通用的另一种 json 格式还是只有这个？ 【参考方案1】：1- 使用forEach 迭代数组2- 使用object.hasOwnProperty 检查字典中是否存在键3- 使用$("< type-of-element >") 创建 html 元素4- 以所需格式构建字符串。 你可以试试这个脚本：
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"
]
]
var to_append = $("body") //your append selector
if(data && data.length>0)
var outer_ul = $("<ul>")
data.forEach(function(e,i)
if(e.hasOwnProperty("country"))
outer_ul.append($("<li>", text : e['country']))
if(e.hasOwnProperty("state"))
var inner_ul = $("<ul>")
e['state'].forEach(function(__e,__i)
if(__e.hasOwnProperty('capital'))
inner_ul.append($("<li>", text : "State "+(__i+1) + " : " + __e['capital']))
)
outer_ul.append(inner_ul)
)
to_append.append(outer_ul)
这将获得 html 输出：
<ul>
<li>India</li>
<ul><li>State 1 : New Delhi</li><li>State 2 : Chennai</li></ul>
<li>USA</li>
<ul><li>State 1 : Montgomery</li><li>State 2 : Juneau</li></ul>
</ul>
【讨论】：
这是一个很好的独立示例。【参考方案2】：此问题的jQuery版本（现场示例）：
.each 遍历数组
.appendTo 将孩子添加到父母中
.text 设置元素的文本内容
var countries = [
"country": "India",
"state": [
"name": "Delhi",
"capital": "New Delhi"
,
"name": "Tamilnadu",
"capital": "Chennai"
]
,
"country": "USA",
"state": [
"name": "Alabama",
"capital": "Montgomery"
,
"name": "Alaska",
"capital": "Juneau"
]
]
var $root = $("ul");
$.each(countries, function ()
$("<li>").appendTo($root).text(this.country);
var $ul = $("<ul>").appendTo($("<li>").appendTo($root));
$.each(this.state, function ()
$("<li>").appendTo($ul).text(this.name + ": " + this.capital);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul></ul>【讨论】：
【参考方案3】：你可以使用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>【讨论】：
你需要一个 forEach 循环......这并不是最好的选择 @vsync 如果我们使用插件，foreach 循环的用途是什么【参考方案4】：请使用 jquery each 来循环 JSON 数据，这里在每次迭代期间连接变量 html 值，因此您可以附加到任何 DIV。
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"
]
];
jQuery(document).ready(function()
var html = "";
jQuery.each(data, function(i,v)
var temp = JSON.parse(JSON.stringify(v));
html += "<ul><li>"+temp.country+"</li></ul>";
jQuery.each(temp.state, function(j,val)
html += "<li>" + val.name +"</li>";
);
);
$("#result-div").html(html);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-div"></div>【讨论】：
【参考方案5】：当然你也可以用AngularJS来做这个，Angular的一大特点就是绑定数据非常方便。
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"
]
];
function bindData($scope)
$scope.countries = data;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="bindData">
<ul ng-repeat="c in countries">
<li>c.country</li>
<ul>
<li ng-repeat="s in c.state">s.name :s.capital</li>
</ul>
</ul>
</div>【讨论】：
以上是关于如何轻松地将多维 JSON 解析为 html？的主要内容，如果未能解决你的问题，请参考以下文章
如何将所有数据存储在单个数组中，以便我可以轻松地将其作为请求发布？