如何用jQuery查询指定及选中员工的直属上级（含代码修正）

Alright, let's fix up that code so it works properly. Here are the key issues in the original implementation and how to resolve them:

Issues in the Original Code #

1. Incorrect array iteration: You're trying to access employee["firstName"] directly in the $.each loop, but employee is the entire array—you need to use the value parameter (which represents the current employee object in the loop).
2. Missing check for Head property: Not all employees have a Head property (like Sourasis Roy, the CTO), so trying to access Head.Name without checking if Head exists will throw an error.
3. Poor string formatting: The output string is missing spaces, so it'll look jumbled (e.g., "The head ofAbhisekisSumita Nath").
4. No handling for "Select" option: When the user selects the default "Select" option, we should clear the output instead of leaving old content.

Corrected Code #

First, update the HTML to include a <div> where we'll print the result:

<h3>1. Who is Head of </h3> 
<select class="employee"> 
  <option value="0">Select</option> 
  <option value="Amith">Amith</option> 
  <option value="Sourasis">Sourasis</option> 
  <option value="Abhisek">Abhisek</option> 
  <option value="Sanjay">Sanjay</option> 
</select>
<div class="print"></div>

Then fix the jQuery code:

var employee = [
  {"firstName":"Zahir","lastName":"Alam","Age":25,"Company":"Switchme","Role":"Developer","Department":"Tech","Head":{"Id":3,"Name":"Sourasis Roy"}},
  {"firstName":"Amith","lastName":"Manniken","Age":25,"Company":"Switchme","Role":"Developer","Department":"Tech","Head":{"Id":3,"Name":"Sourasis Roy"}},
  {"firstName":"Sourasis","lastName":"Roy","Age":28,"Company":"Switchme","Role":"CTO"},
  {"firstName":"Aditya","lastName":"Mishra","Age":29,"Company":"Switchme","Department":"Tech","Role":"CEO"},
  {"firstName":"Priti","lastName":"Lata","Age":24,"Company":"Switchme","Role":"HR"},
  {"firstName":"Sumita","lastName":"Nath","Age":24,"Company":"Switchme","Role":"HLA Head","Department":"Crm"},
  {"firstName":"Tarini","lastName":"Khanna","Age":22,"Company":"Switchme","Role":"Content Writer"},
  {"firstName":"Abhisek","lastName":"Soni","Age":23,"Company":"Switchme","Role":"HLA","Department":"Crm","Head":{"Id":5,"Name":"Sumita Nath"}},
  {"firstName":"Ankit","lastName":"Pump","Age":23,"Company":"Switchme","Role":"HLA","Department":"Crm","Head":{"Id":5,"Name":"Sumita Nath"}},
  {"firstName":"Pogo","lastName":"Laal","Age":23,"Company":"Switchme","Role":"Designer"},
  {"firstName":"Sabina","lastName":"Sekh","Age":28,"Company":"Switchme","Role":"HLA Head","Department":"Crm"},
  {"firstName":"Sanjay","lastName":"Poudal","Age":24,"Company":"Switchme","Role":"HLA Head","Department":"Crm","Head":{"Id":10,"Name":"Sabina Sekh"}}
]; 

$(document).ready(function(){ 
  $("select.employee").change(function(){ 
    var selectedEmployee = $(this).val(); 
    var $printDiv = $("div.print");
    
    // Clear output when "Select" is chosen
    if (selectedEmployee === "0") {
      $printDiv.html("");
      return;
    }
    
    // Loop through employees to find the selected one
    $.each(employee, function(key, value) { 
      if (value.firstName === selectedEmployee) { 
        if (value.Head) {
          $printDiv.html(`The head of ${selectedEmployee} is ${value.Head.Name}`);
        } else {
          $printDiv.html(`${selectedEmployee} does not have a direct head.`);
        }
        // Exit the loop once we find the matching employee
        return false;
      }
    }); 
  }); 
});

Key Improvements #

• Uses value.firstName to access the current employee's first name in the loop
• Checks if value.Head exists before accessing Head.Name to avoid errors
• Uses template literals (${}) for cleaner string formatting (you can also use concatenation with spaces if you prefer)
• Clears the output when the "Select" option is selected
• Exits the loop early with return false once the matching employee is found (no need to loop through the rest of the array)

This should now correctly display the direct head for any selected employee, or a message if they don't have one.

内容的提问来源于stack exchange，提问作者stuart