Uncaught TypeError: Cannot read property 'length' of undefined
- by AnApprentice
I'm working to built a contact list that is grouped by the first letter of the contact's last name. 
After a succesfull ajax request, the contact is pushed to addContact:
Ajax success:
    ko.utils.arrayForEach(dataJS.contactList, function(c) {
        contactsModel.addContact(c);
    });
contactsModel.addContact:
//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 < lettersLength; i++) {
                var letter = this.contactsByLetter()[i].letter;
                if (letter === "#" || firstLetter < 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 < contactsLength; j++) {
        var contactName = contacts()[j].lName + " " + contacts()[j].fName;
        if (newContactName < contactName) {
           break;  
        }
    }
    //add the contact at the right index
    contacts.splice(j, 0, newContact);
}.bind(contactsModel);
The contacts json object from the server looks like this:
{
        "total_pages": 10,
        "page": page,
        "contactList": [{
            "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
            "lname": "Bond",
            "id": 241,
            "fname": "James",
            "email": "[email protected]"},
While this works in jsfiddle, when I try it locally, I get the following error during the first push to addContact: 
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
Ideas? Thanks