jquery append an element after append

Question

So I have an 2 objects, one contains supervisor and the other contains employee data and also the supervisor ID that corresponds to the employee(which will be used for the ul id). I wanted them to look like this below, using JQuery append:

• Supervisor A

  • Employee 1

  • Employee 2

• Supervisor B

  • Employee 3

  • Employee 4

or in HTML Form:

<ul id="myEmployee">
   <li> Supervisor A
      <ul id="supervisorA">
          <li id="employee1">Employee 1</li>
          <li id="employee2">Employee 2</li>
      </ul>
   </li>
   <li> Supervisor B
      <ul id="supervisorB">
          <li id="employee3">Employee 3</li>
          <li id="employee4">Employee 4</li>
      </ul>
   </li>
</ul>

Initially I only have <ul id="myEmployee"></ul> to allow JQuery to append the elements.

Sample Data (as requested):

 supervisor = [{
     "SupervisorID": "SupervisorA",
     "DisplayName": "Supervisor A"
 }, {
     "SupervisorID": "SupervisorB",
     "DisplayName": "Supervisor B"
 }];

 employee = [{
     "SupervisorID": "SupervisorA",
     "employeeId": "employee1",
     "DisplayName": "Employee 1"
 }, {
     "SupervisorID": "SupervisorB",
     "employeeId": "employee2",
     "DisplayName": "Employee 2"
 }];

Using a for-loop, I first append the Supervisors first

for (let x = 0; x < supervisor.length; x++) {
   $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');
}

Here comes the problem, when i try to append the employees into the ul that contains the id of the supervisors using another for loop

for (let x = 0; x < employee.length; x++) {                
   $('#'+employee[x].SupervisorID).append('<li>' + employee[x].employeeID+'</li>');
}

Console told me that the JQuery could not find the ID of the ul that i have appended previously. In other words, jQuery thinks that the ul id was not initialised.

Is there a way to fix this?

Answer 1

You have to understand how JS arrays and objects work. First understand that and you'll see what went wrong.

Change the first loop to this:

for (let x = 0; x < supervisor.length; x++) {
   $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');
}

And second loop to this:

for (let x = 0; x < employee.length; x++) {                
   $('#'+employee[x].SupervisorID).append('<li id=' + employee[x].employeeID + '>' + employee[x].DisplayName+'</li>');
}

Answer 2

The sample data you gave shows 2 arrays of objects, not 2 objects. You are also not accessing the array indexes and object keys correctly as @Andreas pointed out above.

Once you correct the code to access the arrays and objects within the jQuery should work.

for (let x = 0; x < supervisor.length; x++) {
    $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');
}

for (let x = 0; x < employee.length; x++) {                
   $('#' + employee[x].SupervisorID ).append('<li>' + employee[x].DisplayName + '</li>');
}

Working example: https://jsfiddle.net/pjpwea/pLu5j3fh/2/

Answer 3

Jsfiddle You are accessing the objects in a wrong manner

First For Loop Fix :

 $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');

Second For loop Fix :

for (let x = 0; x < employee.length; x++) {                
   $('#'+employee[x].SupervisorID).append('<li>' + employee[x].employeeId+'</li>');
}