Javascript 使用js从json文件创建嵌套列表_Javascript_Json

Javascript 使用js从json文件创建嵌套列表

javascript json

Javascript 使用js从json文件创建嵌套列表,javascript,json,Javascript,Json,我有一个示例json文件，如下所示： { "PetOwners": [ { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, { "animal":"cat", "name":"Felix" }, { "animal":"hamster", "name":"Light

我有一个示例json文件，如下所示：

{
    "PetOwners": [
        {
        "name":"John",
        "age":31,
        "pets":[
            { "animal":"dog", "name":"Fido" },
            { "animal":"cat", "name":"Felix" },
            { "animal":"hamster", "name":"Lightning" }
        ]
        },
        {
        "name":"Albert",
        "age":29,
        "pets":[
            { "animal":"iquana", "name":"bart" },
            { "animal":"rooster", "name":"Callie" },
            { "animal":"weasel", "name":"Jonathan" }
        ]
        },
        {
        "name":"Sally",
        "age":32,
        "pets":[
            { "animal":"cat", "name":"Abbott" },
            { "animal":"bird", "name":"Buzz" },
            { "animal":"rabbit", "name":"Hoppity" }
            ]
        }
    ]
}

我想创建一个HTML列表出来的这些项目，将显示宠物主人的名字和缩进列表，他们的宠物下面的名字。我已经能够为这个名字创建一个列表，但是如何在每个名字下创建主人宠物的缩进列表呢？以下是我到目前为止的情况

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Reading a JSON file</title>
</head>
<body>

<h2>Reading a JSON file.</h2>
<ul id="demo"></ul>
<script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            var x = document.getElementById("demo");
            for (i=0; i<myObj.PetOwners.length; i++){
                var opt = myObj.PetOwners[i].name;
                var el = document.createElement("LI");
                el.textContent = opt;
                el.value = opt;
                x.appendChild(el);
            }
        }
    };
    xmlhttp.open("GET", "http://example.com/json/json_demo.json", true);
    xmlhttp.send();
</script>


</body>
</html>


读取JSON文件
读取JSON文件。

var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var myObj=JSON.parse（this.responseText）；
var x=document.getElementById（“演示”）；
对于（i=0；i
var数据={
“宠物主人”：[
{
“姓名”：“约翰”，
“年龄”：31岁，
“宠物”：[
{“动物”：“狗”，“名字”：“菲多”}，
{“动物”：“猫”，“名字”：“菲利克斯”}，
{“动物”：“仓鼠”，“名字”：“闪电”}
]
},
{
“姓名”：“阿尔伯特”，
“年龄”：29岁，
“宠物”：[
{“动物”：“伊卡纳”，“名字”：“巴特”}，
{“动物”：“公鸡”，“名字”：“卡莉”}，
{“动物”：“黄鼠狼”，“名字”：“乔纳森”}
]
},
{
“姓名”：“莎莉”，
“年龄”：32岁，
“宠物”：[
{“动物”：“猫”，“名字”：“艾伯特”}，
{“动物”：“鸟”，“名字”：“巴斯”}，
{“动物”：“兔子”，“名字”：“Hoppitce”}
]
}
]
};
var html=data[“PetOwners”].map（函数（所有者）{
var res=“”+所有者[“名称”]；
res+=“”；
res+=所有者[“宠物”]。地图（功能（宠物）{
返回“”+pet[“name”]+“->”（“+pet[“animal”]+””；
}).加入（“”）；
返回res+“”；
});
document.body.innerHTML=html；
//log（html）；
//或
var ul_uuz=childs=>{
var res=document.createElement（“ul”）；
forEach（c=>res.appendChild（c））；
返回res；
}
var li_u2;=title=>{
var res=document.createElement（“li”）；
res.textContent=标题；
返回res；
}
var list=ul（数据[“PetOwners”].map（函数（所有者）{
var res=li_（所有者[“名称]）；
res.appendChild（ul_u2;）（所有者[“宠物”]）地图（功能（宠物）{
返回李（宠物[“名称”]+“->”+宠物[“动物”]）；
}) ) );
返回res；
}) );
document.body.appendChild（list）；
代码非常简单。只需重复与外部循环相同的循环即可
下面是同样的例子


读取JSON文件
读取JSON文件。

var myObj={
“宠物主人”：[
{
“姓名”：“约翰”，
“年龄”：31岁，
“宠物”：[
{“动物”：“狗”，“名字”：“菲多”}，
{“动物”：“猫”，“名字”：“菲利克斯”}，
{“动物”：“仓鼠”，“名字”：“闪电”}
]
},
{
“姓名”：“阿尔伯特”，
“年龄”：29岁，
“宠物”：[
{“动物”：“伊卡纳”，“名字”：“巴特”}，
{“动物”：“公鸡”，“名字”：“卡莉”}，
{“动物”：“黄鼠狼”，“名字”：“乔纳森”}
]
},
{
“姓名”：“莎莉”，
“年龄”：32岁，
“宠物”：[
{“动物”：“猫”，“名字”：“艾伯特”}，
{“动物”：“鸟”，“名字”：“巴斯”}，
{“动物”：“兔子”，“名字”：“Hoppitce”}
]
}
]
};
var x=document.getElementById（“演示”）；
var outerList=document.createElement（'ul'）；
对于（var i=0；i您可以重复另一个循环
            for(pet = 0; pet < myObj.PetOwners[i].pets.length; pet++) {
                var optIn = myObj.PetOwners[i].pets[pet].animal + ":" + myObj.PetOwners[i].pets[pet].name;
                var elIn = document.createElement("LI");
                elIn.className = "tab"
                elIn.textContent = optIn;
                elIn.value = optIn;
                x.appendChild(elIn);
            }

for（pet=0；pet

添加下面的css
            <style type="text/css">
                <!--
                .tab { margin-left: 40px; }
                -->
            </style>


如果你想坚持使用纯JavaScript，你可以在上面的for循环中使用相同的方法ul和li
。为myObj.PetOwners[i].pets添加一个内部循环，并且基本上做与填充嵌套的外部循环相同的事情