key对象组合-jquery .east()

Question

{
    "employees": {
        "year 2010": [
            {
                "fn": "john",
                "ln": "doe",
            }, {
                "fn": "jane",
                "ln": "doe",
            }
        ],
        "year 2012": [
            {
                "fn": "jack",
                "ln": "frost",
            }, {
                "fn": "julie",
                "ln": "frost",
            }
        ],
        "year 2014": [
            {
                "fn": "frank",
                "ln": "green",
            }, {
                "fn": "steven",
                "ln": "green",
            }
        ]
    }
}

如何使用jQuery ever（）函数循环循环并在此结构中输出到页面。如果需要，可以对JSON进行不同的格式，我只需要能够像以下列出的那样输出即可。

年度2010

• John Doe
• 简·杜（Jane Doe）

2012年

• 杰克·弗罗斯特
• 朱莉·弗罗斯特

年2014年

• 弗兰克·格林
• 史蒂文·格林

Answer 1

在JSFIDDLE上完成代码。

var employees = json['employees'];
$.each(employees, function (key, data) {
    console.log(key);
    var cont = $(".container");
    cont.append("<h3>" + key + "</h3>");
    $.each(data, function (index, data) {
        console.log(data);
        cont.append("<p>" + data.fn + " " + data.ln + "</p>");
    })
})

它具有非常简单的标记，但是您可以根据需要进行样式。

Answer 2

var emps = {
    "employees": {
        "year 2010": [
            {
                "fn": "john",
                "ln": "doe",
            }, {
                "fn": "jane",
                "ln": "doe",
            }
        ],
        "year 2012": [
            {
                "fn": "jack",
                "ln": "frost",
            }, {
                "fn": "julie",
                "ln": "frost",
            }
        ],
        "year 2014": [
            {
                "fn": "frank",
                "ln": "green",
            }, {
                "fn": "steven",
                "ln": "green",
            }
        ]
    }
};
var arr = [];
$.each(emps.employees, function(i, v){
   $("#employees").append('<ul>'+i+'</lu>');
   $.each(v, function(j, e){
     $("#employees").last().append('<li>'+e.fn+' '+ e.ln+'</li>');
   });
   
});

ul {
  padding-left: 0px;
  }
li {
  padding-left: 30px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="employees"></ul>