多层json想做一个循环，不太会，谁能帮我说说，以下。（谢谢）

我这边有一长串Json，他大概的内容就是最外层是标人类，然后细分国家，再细分人，希望做到一个类似下图样子的需求，我这边能看出来要做一个多层Json循环解析，可再具体的不太会写，希望哪个大神能帮我讲一讲好吗，谢谢。
以下附上具体数据及样式。
需求就是点击上面的选项卡，来显示不同的内容。我想到写3个div由上面的按钮控制显隐，我遇到的问题是不太清楚怎么去做这个Json遍历。
图片描述

Json：

{
"message":"",
"error":"false",
"human":[
    {
        "country":"china",
        "amount":"2",
        "people":[
            {
                "id":"01",
                "name":"zhangsan",
                "sex":"male",
                "job":"teacher"
            },
            {
                "id":"02",
                "name":"lisi",
                "sex":"female",
                "job":"worker"
            }
        ]
    },
    {
        "country":"America",
        "amount":"2",
        "people":[
            {
                "id":"01",
                "name":"john",
                "sex":"male",
                "job":"teacher"
            },
            {
                "id":"02",
                "name":"Lily",
                "sex":"female",
                "job":"worker"
            }
        ]
    },
    {
        "country":"Japan",
        "amount":"2",
        "people":[
            {
                "id":"01",
                "name":"Saxi",
                "sex":"male",
                "job":"teacher"
            },
            {
                "id":"02",
                "name":"Baga",
                "sex":"female",
                "job":"worker"
            }
        ]
    }
]
}

javascript

阅读 5.3k

4 个回答

得票最新

kikong

19.1k31320

发布于
2015-12-04

function displayHumanInfor(humanInfor){
    var countryName=humanInfor["country"]||'';
    var peopleArray=humanInfor["people"]||[];
    var amount= parseInt(humanInfor["amount"])||0;
    //执行你的业务逻辑，拼接HTML等
}
var jsonHumanObjects=jsonObject['human'];
jsonHumanObjects.forEach(function(humanInfor,index){
    displayHumanInfor(humanInfor);
});

wangfulin

6.1k1513

发布于
2015-12-04

更新于
2015-12-04

var human = All['human'];
// 创建某个国家中包含的所有人数组的对象
var countryPeople = {};

var num = human.length;
for(var i=0; i < num; i++){
    countryPeople[human[i]['country']] = human[i]['people'];
}

// 后面就可以直接通过countryPeople对象获取某个国家的所有人的信息啦

jsven

1.4k51323

发布于
2015-12-04

更新于
2015-12-04

菜鸟也写一写

//html 部分
<!--国家部分-->
    <div id="human"></div>

    <!--国家人员-->
    <div id="people"></div>

//js 部分  js不怎么会 就用jQuery操作DOM了

var data=youData;//  youData 就是你说的数据源
var countryHtml="";
var peopleHtml="";

var dataHuman=data.human;
for(var key in dataHuman){
    countryHtml+="<span class='_country' flag='"+dataHuman[key].country+"'>"+dataHuman[key].country+"</span>";
    var peopleHtmlItem="<div style='display:none;' id='"+dataHuman[key].country+"'>_peopleHtml</div>";
    var people=dataHuman[key].people;
    var _peopleHtmlItem="";
    for(var keyPl in people){
        var peopleItem=people[keyPl];
        for(var paramKey in peopleItem){
            _peopleHtmlItem+="<div>"+paramKey+":"+peopleItem[paramKey]+"</div>"
        }
    }
    peopleHtmlItem=peopleHtmlItem.replace("_peopleHtml",_peopleHtmlItem);

    peopleHtml+=peopleHtmlItem;
}
jQuery("#human").append(countryHtml);
jQuery("#people").append(peopleHtml);

jQuery("#human ._country").click(function(){
    jQuery("#people>div").hide();
    jQuery("#"+jQuery(this).attr("flag")).show();
})

waterloocode

238510

发布于
2015-12-04

更新于
2015-12-05

为什么这种问题也会出现，是帮忙做作业的节奏啊。
--------------------------这是分割线----------

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

    .country{
        width: 200px;
        height: 50px;
        background-color: #EFA;
        display:inline-block;
        margin-left: 10px;
    }
    .people{
        width: auto;
        background-color: #AFE;
        margin: 10px;
    }
    .person{
        width: 120px;
        background-color: #FEA;
        display:inline-block;
        margin-top: 10px;
        margin-left: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

</style>
<meta charset="utf-8">
<title>测试</title>
<script src="../libs/jquery.min.js"></script>
<script type="text/javascript">
function getinfo(obj,country)
{
    $("."+country+"_people").show();
}
function leave(obj,country)
{
    $("."+country+"_people").hide();
}
$(document).ready(function(){
  var data = {
        "message":"",
        "error":"false",
        "human":[
            {
                "country":"china",
                "amount":"2",
                "people":[
                    {
                        "id":"01",
                        "name":"zhangsan",
                        "sex":"male",
                        "job":"teacher"
                    },
                    {
                        "id":"02",
                        "name":"lisi",
                        "sex":"female",
                        "job":"worker"
                    }
                ]
            },
            {
                "country":"America",
                "amount":"2",
                "people":[
                    {
                        "id":"01",
                        "name":"john",
                        "sex":"male",
                        "job":"teacher"
                    },
                    {
                        "id":"02",
                        "name":"Lily",
                        "sex":"female",
                        "job":"worker"
                    }
                ]
            },
            {
                "country":"Japan",
                "amount":"2",
                "people":[
                    {
                        "id":"01",
                        "name":"Saxi",
                        "sex":"male",
                        "job":"teacher"
                    },
                    {
                        "id":"02",
                        "name":"Baga",
                        "sex":"female",
                        "job":"worker"
                    }
                ]
            }
        ]
        };
        var country;
        var amount;
        var people;

        var html_top = "";
        var html_bot = "";
        var object;
        var count = 0;
        for(x in data['human']){
            count++;
            object = data['human'][x];
            console.log(object);
            country = object['country'];
            amount = object['amount'];
            people = object['people'];

            div_country = "<div class='country' style='cursor:pointer' onmouseleave = 'leave(this,\""+country+"\")' onmouseover = 'getinfo(this,\""+country+"\")' id='"+country+"'>";
            html_top += div_country+"<p>"+country+"</p>";
            html_bot += "<div class='people "+country+"_people'>";
            for(m in people){
                person = people[m];
                html_bot += "<div class='person' id='"+country+"_"+person['id']+"_people'>";
                html_bot += "<p>name:"+person['name']+"</p>";
                html_bot += "<p>sex:"+person['sex']+"</p>";
                html_bot += "<p>job:"+person['job']+"</p>";
                html_bot += "</div>";
            }
            html_bot += "</div>";
            html_top += "</div>";
        }
        $("#container").css("width",count*210+"px");
        $("#container").html(html_top+html_bot);

        $(".people").hide();
});

</script>
</head>
<body>
<div>
    <div id="container">
    </div>
</div>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

多层json想做一个循环，不太会，谁能帮我说说，以下。（谢谢）

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？