Jquery 如何轻松地将多维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是这样的

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

印度

状态1：资本
状态2：资本2

美国

状态1：资本
状态2：资本2

我想得到这样的输出

---

获取此输出的最佳和最简单的方法是什么？

1-使用

forEach迭代数组

2-使用
对象检查字典中是否存在键。hasOwnProperty

3-使用
$（“”）创建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)
}

var数据=[
{
“国家”：“印度”，
“国家”：[
{
“名称”：“德里”，
“首都”：“新德里”
},
{
“名称”：“泰米尔纳德邦”，
“首都”：“钦奈”
}
]
},
{
“国家”：“美国”，
“国家”：[
{
“姓名”：“阿拉巴马州”，
“首都”：“蒙哥马利”
},
{
“名称”：“阿拉斯加”，
“资本”：“朱诺”
}
]
}
]
var to_append=$（“body”）//附加选择器
如果（数据和数据长度>0）{
var outer_ul=$（“
”）
data.forEach（函数（e，i）{
如果（例如，拥有自己的财产（“国家”））{
外部附加（$（“
”，{text:e['country']}））
}
如果（例如hasOwnProperty（“州”））{
var internal_ul=$（“
”）
e['state'].forEach（函数（u e，u i）{
如果（u e.hasOwnProperty（'capital'））{
内部附加（$（“
”，{text:“State”+（uuu i+1）+：“+u e['capital']}））
}
})
外部附加（内部附加）
}
})
to_append.append（外部）
}

这将获得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>


印度
州1：新德里
州2：钦奈

美国
第一州：蒙哥马利第二州：朱诺

此问题的jQuery版本（实时示例）：


遍历数组
将子项添加到父项的步骤
设置元素的文本内容的步骤


var国家=[
{
“国家”：“印度”，
“国家”：[
{
“名称”：“德里”，
“首都”：“新德里”
},
{
“名称”：“泰米尔纳德邦”，
“首都”：“钦奈”
}
]
},
{
“国家”：“美国”，
“国家”：[
{
“姓名”：“阿拉巴马州”，
“首都”：“蒙哥马利”
},
{
“名称”：“阿拉斯加”，
“资本”：“朱诺”
}
]
}
]
变量$root=$（“ul”）；
美元。每个（国家/地区，职能（）{
$（“
”）.appendTo（$root）.text（this.country）；
var$ul=$（“
”）.appendTo（$（“
”）.appendTo（$root））；
$.each（this.state，function（）{
$（“
”）.appendTo（$ul）.text（this.name+”：“+this.capital）；
});
});

您可以使用jquery jput插件（）



var数据=[
{
“国家”：“印度”，
“国家”：[
{
“名称”：“德里”，
“首都”：“新德里”
},
{
“名称”：“泰米尔纳德邦”，
“首都”：“钦奈”
}
]
},
{
“国家”：“美国”，
“国家”：[
{
“姓名”：“阿拉巴马州”，
“首都”：“蒙哥马利”
},
{
“名称”：“阿拉斯加”，
“资本”：“朱诺”
}
]
}
];
$（文档）.ready（函数（）{
//初始加载json数据
$（'#maindiv'）.jPut({
jsonData：数据，
名称：'template1'
});
});  


{{国家}

州1名称：{{State.0.Name}，大写：{{State.0.Capital}
州2名称：{{State.1.Name}，大写：{{State.1.Capital}


请分别使用jquery循环JSON数据，在每次迭代过程中，变量html值被连接，因此您可以附加到任何DIV


var数据=[
{
“国家”：“印度”，
“国家”：[
{
“名称”：“德里”，
“首都”：“新德里”
},
{
“名称”：“泰米尔纳德邦”，
“首都”：“钦奈”
}
]
},
{
“国家”：“美国”，
“国家”：[
{
“姓名”：“阿拉巴马州”，
“首都”：“蒙哥马利”
},
{
“名称”：“阿拉斯加”，
“资本”：“朱诺”
}
]
}
];
jQuery（文档）.ready（函数（）{
var html=“”；
每个（数据，函数（i，v）{
var temp=JSON.parse（JSON.stringify（v））；
html+=“
”+temp.country+”
”；
每个（临时状态，函数（j，val）{
html+=“
”+val.name+“
”；
}); 
});
$（“#结果div”）.html（html）；
});
当然，你也可以使用AngularJS，这是AngularJS的一个主要特点，它非常简单