title: Access Object Properties of ko.observable item selected in HTML drop-down list and use them in View Model
body: <p>I am building a single page web application with Knockout that will display a variety of different information based on the user's selections.  At the top there is a drop down list populated from a array of JSON objects using the options binding.  Once the user makes a selection from the list how do I access the properties of the specified object in my View Model JavaScript code?</p>
  
  <p>My specific app is about college football teams.  The drop down list at the top has a list of team names that are pulled from an array of JSON objects that contain details about each team. This array comes from an AJAX request to the server.  I know this part of my code works as I am able to use other properties in the selected object to change the look of the HTML page.  However I can't figure out how to be able to access the properties of the selected object (school name, mascot, conference, etc) in my View Model Java Script so I can use those details to make further AJAX requests that will provide the user more information about the selected team (such as rosters, schedules, and stats).</p>
  
  <p>There is a "value: selectedSchool" in the data-bind for my select menu in HTML that connects to a self.selectedSchool = ko.observable(); in my view model.  I have tried a variety of ways to access the properties in that self.selectedSchool including dot and bracket notation, a ternary operator to check if it is null before accessing the property, and more.  But as far as I can tell that variable doesn't actually contain an object that I can access, so how do I get around this?</p>
  
  <p>I have tried to start small by just trying to access the 'school' property from that object and use it to get the rosters (which have the same file names as the school name) via AJAX, but eventually I want to do a lot more with it.</p>
  
  <p>my HTML View:   </p>
  
  <pre><code>&lt;div&gt;
      &lt;select data-bind="options: schools,
                        optionsText: function(item) {
                          return item.school + ' ' + item.mascot
                        },
                        value: selectedSchool,
                        optionsCaption: 'Choose a team...'"&gt;&lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;!-- ko with: selectedSchool --&gt;
      &lt;p&gt;
        School: &lt;span data-bind="text: school"&gt;&lt;/span&gt;
      &lt;/p&gt;
      &lt;p&gt;
        Conference: &lt;span data-bind="text: conference"&gt;&lt;/span&gt;
      &lt;/p&gt;
      &lt;img data-bind="attr: { src: logos[0], alt: school}"&gt;
      &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above HTML is the only part that works now.  I also have a table for the team rosters with columns for things like name, position, and size once I can get the below AJAX request to work.</p>
  
  <p>my JavaScript View Model:</p>
  
  <pre><code>function SchoolsViewModel() {
      // Data
      var self = this;
      self.schools = ko.observableArray([]);
      self.selectedSchool = ko.observable();
      self.selectedRosterData = ko.observableArray([]);
  
      // Behaviours
      $.getJSON("/schools", function(data) {
        self.schools(data);
      });
  
      //the below part works doesn't work.  this is one of many tries
      self.selectedRoster = function(roster) {
        self.selectedSchool(roster);
        $.getJSON("/rosters", { school: self.selectedSchool['school'] }, function(data) {
      self.selectedRosterData(data);
      });
  
  ko.applyBindings(new SchoolsViewModel()); 
  
  };
  </code></pre>
  
  <p>I want to make the second AJAX request return the JSON file from the server with the same name as the 'school' property from the selected JSON object in the schools array.  However self.selectedSchool doesn't seem to contain a JSON object at all as far as I can tell.  I don't want the AJAX request to activate until after the user selects a team from the drop down menu.  </p>
  
  <p>Also, for what it's worth, I eventually want to do a lot more with this than just request the roster data.  The ideas is that after the user selects a team from the drop down then a list of folders will appear with several options like roster, schedule, stats, and news.  When the user clicks on one of the folders they will receive the corresponding information. If I can access the properties of the selected team object from the drop-down menu then I think I can figure the rest out, but any answers with an eye on future expandability would be appreciated.   </p>
  
  <p>Thank you all so much for your time! </p>