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

【问题标题】：How to parse multidimensional JSON to html easily?如何轻松地将多维 JSON 解析为 html？
【发布时间】：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 格式还是只有这个？

标签： jquery json multidimensional-array

【解决方案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>

【讨论】：