为嵌套的 java 对象和列表使用 json 填充下拉列表
Populating drop down with json for nested java objects and lists
我正在尝试用 Rest 中的 2 个不同的实体对象列表填充两个不同的 select 下拉框。 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 个对象。
我的 objective 是用项目列表和地址列表填充 2 select 框,因为每个联系人都有自己的特定内容。 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>");
});
});
您正在访问一个数组,您的JSON是单个对象
假设一些事情,更改数据会得到 table 行:
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>
我正在尝试用 Rest 中的 2 个不同的实体对象列表填充两个不同的 select 下拉框。 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 个对象。 我的 objective 是用项目列表和地址列表填充 2 select 框,因为每个联系人都有自己的特定内容。 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>");
});
});
您正在访问一个数组,您的JSON是单个对象
假设一些事情,更改数据会得到 table 行:
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>