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 each（）函数遍历此JSON并将其输出到此结构中的页面。如果需要，JSON的格式可以不同，我只需要能够输出如下所示。

2010年

John Doe
Jane Doe

2012年

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

2014年

Frank Green
Steven Green

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

＆＃13;

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>');
   });
   
});

＆＃13;

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

＆＃13;

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

＆＃13;

按键分组JSON对象 - jQuery .each（）

2 个答案: