javascript - ドット表記によるオブジェクト プロパティへのアクセス

Question

サーバーから返されたコレクションを繰り返し処理しています。次のようになります。

roster: Array
    0: Object
        avatar: null
        contactName: "me@test.com"
        contactType: "grouping"
        displayName: "Joe Shmoe"

テーブルを作成して「displayName」を追加しようとしていますが、ドット表記によるアクセスが機能しません。以下のコードの何が問題になっていますか?

function createAddressBook()
            {
                var tbl = document.getElementById( 'addressBook_tbl' );

                var tbdy = document.createElement( 'tbody' );

                // cells creation
                for( var j = 0; j <= roster.length; j++ ) 
                {
                    // table row creation
                    var row = document.createElement( "tr" );

                    for( var i = 0; i < 2; i++ ) 
                    {
                        // create element <td> and text node 
                        //Make text node the contents of <td> element
                        // put <td> at end of the table row
                        var cell = document.createElement( "td" );    
                        var cellText = document.createTextNode( roster[ j ].displayName ); 

                        cell.appendChild( cellText );
                        row.appendChild( cell );
                    }

                    //row added to end of table body
                    tbdy.appendChild( row );
                }

                // append the <tbody> inside the <table>
                tbl.appendChild( tbdy );
            }