我正在尝试使用Rest中的2个不同的Entity对象列表填充两个不同的选择下拉框。 Json看起来像这样:
{
"id": 9,
"version": 0,
"emailAddress": "Jon@outlook.com",
"employee": {
"id": 5,
"version": 0,
"firstName": "Jon",
"lastName": "Snow",
"background": "King in the North",
"projectList": [
{
"id": 9,
"version": 0,
"projectName": "Ruling the North",
"clientName": null,
"fieldRate": null
},
{
"id": 10,
"version": 0,
"projectName": "Destroying the White Walkers",
"clientName": null,
"fieldRate": null
}
]
},
"addressList": [
{
"id": 11,
"version": 0,
"streetAddress": "Winterfell",
"zip": null,
"state": null,
"city": "Westeros"
},
{
"id": 12,
"version": 0,
"streetAddress": "Castle Black",
"zip": null,
"state": null,
"city": "Deep North"
}
]
}
这是我的JS: 所有对象都是我创建的类的java对象。 我的目标是用2个项目列表和地址列表填充2个选择框,因为每个联系人都有自己特定的联系人。 addressList是附加到每个联系人的地址列表的变量,projectList是附加到每个雇员的项目列表的变量,而employee是联系人中的嵌套对象。任何帮助将不胜感激
$.getJSON('/api/contact/', {
ajax: 'true'
}, function (data) {
//console.log(data)
$.each(data, function(index, single) {
var fullName = single.employee.firstName + " " + single.employee.lastName
$('#contact-table').find('tbody')
.append("<tr>" +
"<td>" + single.id + "</td>" +
"<td>" + single.employee.firstName + " " + single.employee.lastName + "</td>" +
"<td>" + single.emailAddress + "</td>" +
"<td>" + single.employee.background + "</td>" +
"<td>" + "<select class='form-control'><options>single.employee.projectList</options></select>" + "</td>" +
"<td>" + "<select class='form-control'><option>single.addressList</option></select>" + "</td>" +
"<td>" + "<button onclick='editEmployee(" + single.id + ")'>Edit</button>" + "</td>" +
"<td>" + "<button data-toggle='modal' data-target='#confirmDeleteModal' data-record-id='" + single.id + "'>Delete</button>" + "</td>" +
"</tr>");
});
});
答案 0 :(得分:1)
您正在访问数组,您的JSON是单个对象
假设有一些事情,更改数据会产生一个表格行:
var data = [{
"id": 9,
"version": 0,
"emailAddress": "Jon@outlook.com",
"employee": {
"id": 5,
"version": 0,
"firstName": "Jon",
"lastName": "Snow",
"background": "King in the North",
"projectList": [{
"id": 9,
"version": 0,
"projectName": "Ruling the North",
"clientName": null,
"fieldRate": null
}, {
"id": 10,
"version": 0,
"projectName": "Destroying the White Walkers",
"clientName": null,
"fieldRate": null
}]
},
"addressList": [{
"id": 11,
"version": 0,
"streetAddress": "Winterfell",
"zip": null,
"state": null,
"city": "Westeros"
}, {
"id": 12,
"version": 0,
"streetAddress": "Castle Black",
"zip": null,
"state": null,
"city": "Deep North"
}]
}]
var $tbody = $('#contact-table').find('tbody');
$.each(data, function(key, single) {
var fullName = single.employee.firstName + " " + single.employee.lastName;
var $tr = $("<tr>");
$tr.append(
"<td>" + single.id + "</td>" +
"<td>" + single.employee.firstName + " " + single.employee.lastName + "</td>" +
"<td>" + single.emailAddress + "</td>" +
"<td>" + single.employee.background + "</td>")
var $sel1 = $("<select class='form-control'><options>single.employee.projectList</options></select>");
$.each(single.employee.projectList, function(_, project) {
$sel1.append('<option value="'+ project.projectName +'">'+ project.projectName +'</option>')
});
$tr.append($("<td/>").append($sel1));
var $sel2 = $("<select class='form-control'><option>single.addressList</option></select>");
$.each(single.addressList, function(_, addr) {
$sel2.append('<option value="'+addr.streetAddress +'">'+addr.streetAddress+'</option>');
});
$tr.append($("<td/>").append($sel2));
$tr.append("<td>" + "<button onclick='editEmployee(" + single.id + ")'>Edit</button>" + "</td>" +
"<td>" + "<button data-toggle='modal' data-target='#confirmDeleteModal' data-record-id='" + single.id + "'>Delete</button>" + "</td>");
$tbody.append($tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="contact-table">
<thead></thead>
<tbody></tbody>
</table>