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

Question

我想填充兩個不同的選擇下拉框和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是附加到每個員工的項目列表的變量，而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>"); 
    }); 
}); 

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>