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++ )

通过点表示法访问对象属性

1 个答案: