通過點符號訪問對象屬性

Question

我遍歷從服務器返回的集合;它看起來像這樣：

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

我創建一個表，並試圖將「顯示名」添加到它，而是由點號訪問不能正常工作。我的代碼在下面有什麼問題？

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