Populating drop down with json for nested java objects and lists

Question

I am trying to populate two different select drop down boxes with 2 different lists of Entity objects in Rest. The Json looks like this:

{
"id": 9,
"version": 0,
"emailAddress": "[email protected]",
"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"
    }
]

}

Here is my JS: All of the objects are java objects of classes I created. my objective is to fill the 2 select boxes with a list of Projects and a list of Addresses as each contact has those specific to themselves. The addressList is a variable of List of Addresses attached to each contact and the projectList is a variable of List of Projects attached to each employee, while employee is a nested object within contact. Any help would be greatly appreciated

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

Where is this depending on rest and java? If you click the <> and add the JSON as a JS Object and remove the getJSON, you have the jQuery needed to show a minimal reproducible example — mplungjan
– mplungjan, Commented Aug 17, 2017 at 14:05

mplungjan · Accepted Answer · 2017-08-17 14:46:36Z

You are accessing an array, your JSON is a single object

Assuming a few things, changing the data gives a table row:

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

Thank you! exactly what I was looking for and works perfect. Biggest problem is understanding exactly how .each works in jQuery
Array : (index,value) object: (object) I use the _ when I do not care about the index

Collectives™ on Stack Overflow

Populating drop down with json for nested java objects and lists

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related