如何轻松地将多维JSON解析为html？

我想轻松地将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是这样的。

 
 
India
 
 
State1 :capital
 
State2 :capita2
 
 
USA
 
 
State1 :capital
 
State2 :capita2
 
  

我希望获得这样的输出哪种方法是获得此输出的最佳和最简单的方法？

Answer 1

你可以使用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' }); }); 

   
 
 
 
{{country}}
 
 
State 1 Name : {{state.0.name}}, Capital : {{state.0.capital}}
 
State 2 Name : {{state.1.name}}, Capital : {{state.1.capital}}
 
  
  

Answer 2

请使用每个jquery来循环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 += "
"+temp.country+"
"; jQuery.each(temp.state, function(j,val){ html += "
" + val.name +"
"; }); }); $("#result-div").html(html); }); 

Answer 3

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 = $("
") data.forEach(function(e,i){ if(e.hasOwnProperty("country")){ outer_ul.append($("
", {text : e['country']})) } if(e.hasOwnProperty("state")){ var inner_ul = $("
") e['state'].forEach(function(__e,__i){ if(__e.hasOwnProperty('capital')){ inner_ul.append($("
", {text : "State "+(__i+1) + " : " + __e['capital']})) } }) outer_ul.append(inner_ul) } }) to_append.append(outer_ul) } 

这将得到html输出：

 
 
India
 
State 1 : New Delhi
State 2 : Chennai
 
USA
 
State 1 : Montgomery
State 2 : Juneau
  

Answer 4

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 () { $("
").appendTo($root).text(this.country); var $ul = $("
").appendTo($("
").appendTo($root)); $.each(this.state, function () { $("
").appendTo($ul).text(this.name + ": " + this.capital); }); }); 

Answer 5

当然你也可以使用AngularJS，它是角度的一个主要点，它很容易绑定数据。

 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; } 

  
 
 
{{c.country}}
 
 
{{s.name}} :{{s.capital}}