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

Question

我正在尝试用 Rest 中的 2 个不同实体对象列表填充两个不同的选择下拉框。 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 个选择框，因为每个联系人都有自己特定的内容。 addressList 是附加到每个联系人的地址列表的变量，projectList 是附加到每个员工的项目列表的变量，而员工是联系人中的嵌套对象。任何帮助将不胜感激

    $.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": "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>