Array within an array dropdown

[mattinahat]

I've been trying to display the information from the selected index of a dropdown list, but after I try to access an array within an array I have trouble. Currently I am using this as my json

 
saveJson({ "classes": [
    {
      "class_name": "eecs131",
 "enrolled": [
 {"brother_roll": "1257"}
 ,
     {"brother_roll": "1254"}
      ]
  
  },
  {
      "class_name": "eecs133",
      "enrolled": [
 {"brother_roll": "1257"}
 ,
     {"brother_roll": "1254"}
      ]
  
  }
  ]
});

 

and this is my function:

function displaySearch() {
  showList();
  var html = "";
  var row;
  html += "<form id='searchClasses' name='searchClasses'>\n";
  html += "<table style='border-collapse:collapse;'>\n";

  html += "<tr class='hidden'><td><p>Select Class to find out whose in it:</p></td></tr>\n";
  html += "<tr class='hidden'>\n";  
  html += "<td><select id='dropdownClasses' name='dropdownClasses' onchange='document.getElementById(\"ClassesSelected\").innerHTML = this.form.dropdownClasses[this.form.dropdownClasses.selectedIndex].value'>\n";
  for (var c=0; c<json.classes.length; c++) {
    html += "<option value='" + json.classes[c].class_name + "'>" + json.classes[c].class_name + "</option>\n";
  }
  html += "</select></td>\n";
  html += "<td id='ClassesSelected'></td>\n";
  
  html += "</table>\n";
  html += "</form>\n";
  document.getElementById('divlist').innerHTML = html;
}

 

This displays the class name of the selected class, but I want to display a list of brother_roll for that specific class. Every time I try to do this I either just have an output of [object Object],[object Object] or I cant even access the brother_roll. So if eecs131 is selected, 1257 and 1254 would be displayed.

 

Any ideas on how to access that second array?

 

Thanks in advanced for your help!

-Matt