JavaScript 从数组对象中获取值不起作用

Question

我正在做一个快速的 JavaScript 练习，您可以从下拉菜单中选择一个年级。计算机应该返回低于该特定年级的学生列表。年级是对象键。学生列表是对象值。我的大部分代码都有效。只是无法获取我选择打印的年级的学生名单。我试图循环遍历数组对象并将带有我选择的键的项目存储到空数组中，然后输出数组列表。

var listOfStudents = {
  "Freshman": "Janice Baker",
  "Sophomore": "Leon Rashad",
  "Freshman": "Jeff Grant",
  "Freshman": "Hazel Miles",
  "Junior": "Charlene Scott",
  "Junior": "Fatima Carr",
  "Senior": "Daniel Long",
  "Sophomore": "Candice Brown",
  "Sophomore": "Brian Seal",
  "Junior": "Tiffany Williams",
  "Senior": "Aaliyah Vick",
  "Senior": "Shawn Jackson",
  "Freshman": "Renee Carter",
  "Sophomore": "Russell Crane",
} // line above closes array object

var nameOfStudents = []; // empty array to store answers

function displayStudentsUnderClass(referenceList) {
  var gradeLevelSelected = $("#select-classification option:selected").val();

  /////// code above works. Returns whatever option you selected from list

  for (i = 0; i < referenceList.length; i++) {
    nameOfStudents.push(referenceList[gradeLevelSelected]);
  } // line closes for loop
  $("#studentResults").html("List of students that are <strong>" + gradeLevelSelected + "</strong>:<br/>" + nameOfStudents);
} // line closes function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="classificationPage">
  <select id="select-classification" name="classification-list" class="classification-list">
    <option value="" selected="selected">- None -</option>
    <option value="Freshman">Freshman</option>
    <option value="Sophomore">Sophomore</option>
    <option value="Junior">Junior</option>
    <option value="Senior">Senior</option>
  </select>
  <p id="studentResults"></p> <button class="showStudents" onclick="displayStudentsUnderClass(listOfStudents)">Show Students</button>

Answer 1

code above works

不是真的。 :-) 例如，您的 listOfStudents 中没有 Janice Baker。看起来确实如此，但通过稍后在对象初始值设定项中使用相同的属性名称(“Freshman”)，您已使用新值覆盖该属性。所以你的对象实际上只有这个:

var listOfStudents = {
  "Freshman": "Renee Carter",
  "Sophomore": "Russell Crane",
  "Junior": "Tiffany Williams",
  "Senior": "Shawn Jackson"
};

证明:

var listOfStudents = {
  "Freshman": "Janice Baker",
  "Sophomore": "Leon Rashad",
  "Freshman": "Jeff Grant",
  "Freshman": "Hazel Miles",
  "Junior": "Charlene Scott",
  "Junior": "Fatima Carr",
  "Senior": "Daniel Long",
  "Sophomore": "Candice Brown",
  "Sophomore": "Brian Seal",
  "Junior": "Tiffany Williams",
  "Senior": "Aaliyah Vick",
  "Senior": "Shawn Jackson",
  "Freshman": "Renee Carter",
  "Sophomore": "Russell Crane",
};
console.log(JSON.stringify(listOfStudents, null, 2));

您至少可以做以下几件事:

• 将 listOfStudents 设为数组，而不是对象，并在其中存储对象以及该人员所在类(class)的属性及其姓名。

• 有单独的新生、二年级、三年级和四年级的数组，可能在一个具有类属性名称的对象中。

您的操作完全取决于您访问数据的方式。问题末尾的代码表明您将希望按年级访问列表，因此需要单独的数组:

var studentsByClass = {
  "Freshman": [
    "Janice Baker",
    "Jeff Grant",
    "Hazel Miles",
    "Renee Carter"
  ],
  "Sophomore": [
    "Leon Rashad",
    "Candice Brown",
    "Brian Seal",
    "Russell Crane"
  ],
  "Junior": [
    "Charlene Scott",
    "Fatima Carr",
    "Tiffany Williams"
  ],
  "Senior": [
    "Daniel Long",
    "Aaliyah Vick",
    "Shawn Jackson"
  ]
};

function displayStudentsUnderClass() {
  var gradeLevelSelected = $("#select-classification").val();
  var list = studentsByClass[gradeLevelSelected];
  if (list) {
      $("#studentResults").html("List of students that are <strong>" + gradeLevelSelected + "</strong>:<br/>" + list.join(", "));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="classificationPage">
  <select id="select-classification" name="classification-list" class="classification-list">
    <option value="" selected="selected">- None -</option>
    <option value="Freshman">Freshman</option>
    <option value="Sophomore">Sophomore</option>
    <option value="Junior">Junior</option>
    <option value="Senior">Senior</option>
  </select>
  <p id="studentResults"></p> <button class="showStudents" onclick="displayStudentsUnderClass()">Show Students</button>