Доступ к объекту объекта через точечную нотацию

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 

---

FYI, вы можете использовать .insertCell(-1) для добавления новой ячейки.

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

---

EDIT: Хотя ваш обновленный код работает, у него есть одна ошибка.

Вы пытаетесь получить доступ к roster по индексу за его последним индексом. Поскольку индексы Array основаны на 0, последний индекс равен roster.length - 1, поэтому вы должны использовать < вместо <=.

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