title: Uncaught TypeError: Cannot read property 'length' of undefined
body: <p>I'm working to built a contact list that is grouped by the first letter of the contact's last name. </p>
  
  <p>After a succesfull ajax request, the contact is pushed to addContact:</p>
  
  <p><strong>Ajax success:</strong></p>
  
  <pre><code>    ko.utils.arrayForEach(dataJS.contactList, function(c) {
          contactsModel.addContact(c);
      });
  </code></pre>
  
  <p><strong>contactsModel.addContact:</strong></p>
  
  <pre><code>//add a contact in the right spot under the right letter
  contactsModel.addContact = function(newContact) {
      //grab first character
      var firstLetter = (newContact.lname || "").charAt(0).toUpperCase();
      //if it is a number use #
      if (!isNaN(firstLetter)) {
          firstLetter = "#";
      }
  
      //do we already have entries for this letter
      if (!this.letterIndex[firstLetter]) {
      //new object to track this letter's contacts
          var letterContacts = {
              letter: firstLetter,
              contacts: ko.observableArray([])
          };
  
          this.letterIndex[firstLetter] = letterContacts; //easy access to it
  
          //put the numbers at the end
          if (firstLetter === "#") {
              this.contactsByLetter.push(letterContacts);
          } else {
              //add the letter in the right spot 
              for (var i = 0, lettersLength = this.contactsByLetter().length; i &lt; lettersLength; i++) {
                  var letter = this.contactsByLetter()[i].letter;
  
                  if (letter === "#" || firstLetter &lt; letter) {
                       break;  
                  }
              }  
              this.contactsByLetter.splice(i, 0, letterContacts);
          }
      }
  
      var contacts = this.letterIndex[firstLetter].contacts;
  
      //now we have a letter to add our contact to, but need to add it in the right spot
      var newContactName = newContact.lname + " " + newContact.fname;
      for (var j = 0, contactsLength = contacts().length; j &lt; contactsLength; j++) {
          var contactName = contacts()[j].lName + " " + contacts()[j].fName;
  
          if (newContactName &lt; contactName) {
             break;  
          }
      }
  
      //add the contact at the right index
      contacts.splice(j, 0, newContact);
  
  }.bind(contactsModel);
  </code></pre>
  
  <p>The contacts json object from the server looks like this:</p>
  
  <pre><code>{
          "total_pages": 10,
          "page": page,
          "contactList": [{
              "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
              "lname": "Bond",
              "id": 241,
              "fname": "James",
              "email": "xxx@yahoo.com"},
  </code></pre>
  
  <p>While this works in jsfiddle, when I try it locally, I get the following error during the first push to addContact: </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined
  jQuery.jQuery.extend._Deferred.deferred.resolveWithjquery-1.5.1.js:869
  donejquery-1.5.1.js:6591
  jQuery.ajaxTransport.send.callbackjquery-1.5.1.js:7382
  </code></pre>
  
  <p>Ideas? Thanks</p>