JavaScript getting value out of array object not working

Question

I'm doing a quick JavaScript exercise where you select a grade level from the drop down menu. The computer is suppose to return the list of students that are under that particular grade level. The grade levels are the object keys. The list of students are the object values. Majority of my code works. Just can't get the list of students under the grade level I selected to print out. I'm trying to loop through the array object and store the items with the key of what I selected into an empty array, then output the array list.

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

Not really. :-) Your listOfStudents doesn't have Janice Baker in it, for instance. It looks like it would, but by using the same property name ("Freshman") later in the object initializer, you've overwritten the property with a new value. So your object really just has this:

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

Proof:

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));

There are a least a couple of things you can do instead:

• Make listOfStudents an array, not an object, and store objects in it with properties for the class the person is in and their name.

• Have separate arrays of freshmen, sophomores, juniors, and seniors, probably in an object with property names for the classes.

What you do depends entirely on how you access the data. Your code at the end of the question suggests you're going to want to access the list by grade, so that would argue for separate arrays:

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>