title: why is my ajax GET data making a strange JSON object?
body: <p>WARNING: possibly a dumb question.</p>
  
  <p>I have an ajax get request like so:</p>
  
  <pre><code>$.getJSON("/recruiting/countries/all/", function (data) {
      $.each(data, function (name, key) {
          var dropdownCountry = new DropdownCountry();
          dropdownCountry.name = name;
          dropdownCountry.key = key;
          self.orgCountryDdl.push(dropdownCountry);
      });
      alert(JSON.stringify(self.orgCountryDdl()));
  });
  </code></pre>
  
  <p>it hits a url and has a list of countries: name and key.</p>
  
  <p>I am trying to assign the data and eventually populate a knockout js observable array for a list of countries. The other javascript code that is references in this GET request:</p>
  
  <pre><code>var DropdownCountry = function (name, key) {
      this.name = name;
      this.key = key;
  };
  
  function UserRecruitingViewModel(apiBaseUrl, userId) {
       var self =this;
       //...snip...
       //ddl country stuff
       self.orgCountryDdl = ko.observableArray();
       self.selectedOrgCountry = ko.observable();
       var DropdownCountry = function (name, key) {
          this.name = name;
           this.key = key;
       };
       self.selectedOrgCountry = ko.observable();
                ///..get request in here...
   };
  </code></pre>
  
  <p>in the alert I have I am seeing this data coming back:</p>
  
  <pre><code> [
  {"name":0,"key":{"Id":1,"Name":"Albania"}}
  ,{"name":1,"key":{"Id":2,"Name":"Algeria"}}
  ,{"name":2,"key":{"Id":3,"Name":"American Samoa"}}
  ,{"name":3,"key":{"Id":4,"Name":"Andorra"}}
  ,{"name":4,"key":{"Id":5,"Name":"Angola"}}
  ,{"name":5,"key":{"Id":6,"Name":"Anguilla"}}
  ,{"name":6,"key":{"Id":7,"Name":"Antarctica"}}
  ...snip...
  ]
  </code></pre>
  
  <p>What is going on, and what is the cleanest way to get this into a knockout observable array?</p>
  
  <p>Sorry: desired result is this data:</p>
  
  <pre><code> [
  {"Id":1,"Name":"Albania"}
  ,{"Id":2,"Name":"Algeria"}
  ,{"Id":3,"Name":"American Samoa"}
  ...snip...
  ]
  </code></pre>
  
  <p>I actually figured it out on accident:</p>
  
  <pre><code>$.getJSON("/recruiting/countries/all/", function (data) {
      $.each(data, function (name, key) {
          var dropdownCountry = new DropdownCountry();
          dropdownCountry.name = key.Name;
          dropdownCountry.key = key.Id;
          self.orgCountryDdl.push(dropdownCountry);
      });
      alert(JSON.stringify(self.orgCountryDdl()));
  });
  </code></pre>
  
  <p>The second function variable had the data I wanted. Can someone explain why that is? I am pretty newbish to ajax calls, so I wouldn't even know what to google.</p>