使用 json 填充嵌套 Java 对象和列表的下拉列表

Question

我正在尝试在 Rest 中使用 2 个不同的实体对象列表填充两个不同的选择下拉框。Json 看起来像这样：

{
"id": 9,
"version": 0,
"emailAddress": "[e-mail]",
"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 个选择框，因为每个联系人都有特定于自己的地址。地址列表是附加到每个联系人的地址列表的变量，项目列表是附加到每个员工的项目列表的变量，而员工是联系人中的嵌套对象。任何帮助将不胜感激

$.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>");
});
});

Answer 1

您正在访问一个数组，您的 JSON 是单个对象

假设有几件事，更改数据会给出一个表行：

var data = [{
"id": 9,
"version": 0,
"emailAddress": "[e-mail]",
"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>