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 );
            }

Answer 1

您正在使用j, 当您定义i.

// ----------------v-------should be `i`
"user: " + roster[ j ].displayName

---

仅供参考，您可以使用.insertCell(-1)附加新单元格。

row.insertCell(-1)
   .appendChild(document.createTextNode( "user: " + roster[ j ].displayName )); 

---

编辑：虽然您更新的代码有效，但它确实有一个错误。

您正在尝试访问roster超出其最后一个索引的索引。因为数组索引是从 0 开始的，最后一个索引是roster.length - 1，所以你应该使用<而不是<=.

// ---------------v
for( var j = 0; j < roster.length; j++ )