新行沒有被創建

Question

我的目標是創建15行15列。

但是，現在我只能創建兩行。一個標題行和另一個包含15列的長行。

新行未被創建，它將所有值插入到一行中。

我真的很困惑，爲什麼只是將它插入到一行中，即使我在打開和關閉創建列的行之外的標籤。

有人可以解釋爲什麼它不創建新的行嗎？ 任何幫助將不勝感激！

這裏是我的代碼：

var $list = $('<table>');      
        $list.append($('<tr>')); 

        TFS_Wit_WebApi.getClient().getWorkItem(284) 
         .then(function (query) { 

          $list.append($('<th>').text("Title")); 
          $list.append($('</th>')); 

          $list.append($('<th>').text("State")); 
          $list.append($('</th>')); 

          $list.append($('<th>').text("Created by")); 
          $list.append($('</th>')); 


          $list.append($('<th>').text("Created date")); 
          $list.append($('</th>')); 
          $list.append($('</tr>')); 


          for (i = 0; i < query.rev; i++) { 
           $list.append($('<tr>')); 
           for (j = 0; j < 3; j++) {         
            TFS_Wit_WebApi.getClient().getRevision(284, 6) 
            .then(function (query) { 
             $list.append($('<td>').text(query.fields['System.State'])); 
             $list.append($('</td>')); 
            }); 

           } 
           $list.append($('</tr>')); 
          } 
         }); 

        $list.append($('</table>')); 
        var $container = $('#query-info-container'); 
        $container.empty(); 
        $container.append($list); 

編輯：

這裏是我試圖訪問和顯示信息的JSON文件：

{ 
    "count": 15, 
    "value": 
    [ 
    { 
     "id": 284, 
     "rev": 1, 
     "fields": { 
     "System.WorkItemType": "User Story", 
     "System.State": "New", 
     "System.Reason": "New", 
     "System.CreatedDate": "2016-06-23T14:31:37.567Z", 
     "System.CreatedBy": "zxc", 
     "System.ChangedDate": "2016-06-23T14:31:37.567Z", 
     "System.ChangedBy": "zxc", 
     "System.TeamProject": "zxc", 
     "System.AreaPath": "zxc", 
     "System.IterationPath": "zxc", 
     "System.Title": "Story5", 
     "System.BoardColumnDone": false, 
     "Microsoft.VSTS.Common.Priority": 2, 
     "Microsoft.VSTS.Common.ValueArea": "Business", 
     "WEF_A698283685984E51AE185C4A3D29694A_Kanban.Column.Done": false, 
     "sigArbor.TestProcess.Stage": "Unassigned", 
     "System.BoardColumn": "New", 
     "Microsoft.VSTS.Common.StateChangeDate": "2016-06-23T14:31:37.567Z", 
     "WEF_A698283685984E51AE185C4A3D29694A_Kanban.Column": "New" 
     }, 
     "url": "https://zxc.visualstudio.com/_apis/wit/workItems/284/revisions/1" 
    }, 
    { 
     "id": 284, 

     "rev": 2, 
     "fields": { 
     "System.WorkItemType": "User Story", 
     "System.State": "New", 
     "System.Reason": "New", 
     "System.CreatedDate": "2016-06-23T14:31:37.567Z", 
     "System.CreatedBy": "zxc", 
     "System.ChangedDate": "2016-06-23T14:31:37.92Z", 
     "System.ChangedBy": "zxc", 
     "System.TeamProject": "zxc", 
     "System.AreaPath": "zxc", 
     "System.IterationPath": "zxc", 
     "System.Title": "Story5", 
     "System.BoardColumnDone": false, 
     "Microsoft.VSTS.Common.Priority": 2, 
     "Microsoft.VSTS.Common.ValueArea": "Business", 
     "WEF_A698283685984E51AE185C4A3D29694A_Kanban.Column.Done": false, 
     "sigArbor.TestProcess.Stage": "Unassigned", 
     "Microsoft.VSTS.Common.StackRank": 1624983310.0, 
     "System.BoardColumn": "New", 
     "Microsoft.VSTS.Common.StateChangeDate": "2016-06-23T14:31:37.567Z", 
     "WEF_A698283685984E51AE185C4A3D29694A_Kanban.Column": "New" 
     }, 
     "url": "https://zxc.visualstudio.com/_apis/wit/workItems/284/revisions/2" 
    }, 

    { 
     "id": 284, 
     "rev": 3, 
     "fields": { 
     "System.WorkItemType": "User Story", 
     "System.State": "New", 
     "System.Reason": "New", 
     "System.AssignedTo": "zxc", 
     "System.CreatedDate": "2016-06-23T14:31:37.567Z", 
     "System.CreatedBy": "zxc", 
     "System.ChangedDate": "2016-06-23T14:32:00.777Z", 
     "System.ChangedBy": "zxc", 
     "System.TeamProject": "zxc", 
     "System.AreaPath": "zxc", 
     "System.IterationPath": "zxc", 
     "System.Title": "Story5", 
     "System.BoardColumnDone": false, 
     "Microsoft.VSTS.Common.Priority": 2, 
     "Microsoft.VSTS.Common.ValueArea": "Business", 
     "WEF_A698283685984E51AE185C4A3D29694A_Kanban.Column.Done": false, 
     "sigArbor.TestProcess.Stage": "Unassigned", 
     "Microsoft.VSTS.Common.StackRank": 1624983310.0, 
     "System.BoardColumn": "New", 
     "Microsoft.VSTS.Common.StateChangeDate": "2016-06-23T14:31:37.567Z", 
     "WEF_A698283685984E51AE185C4A3D29694A_Kanban.Column": "New" 
     }, 
     "url": "https://zxc.visualstudio.com/_apis/wit/workItems/284/revisions/3" 

和相同的格式繼續...

Answer 1

你需要追加你的td元素到tr元素（你應該不要嘗試明確關閉標籤）它

var $tr = $list.append('<tr>') 
for (...) { 
    var $td = $('<td>').text(...) 
    $tr.append($td) 
} 

覺得作爲構建樹結構，首先創建一個頂級節點，然後添加子節點，以他們的父母。

Answer 2

由於在另一個異步請求中存在一個異步請求，並且在解決promise時代碼不會追加，因此幾乎總是會一起創建15行並請求並行處理的ajax，當數據可用時將填充數據每次都在最後一行。

我相信一個API請求應該是足夠的。但是，如果你在這方面沒有選擇，那麼你應該在api發送響應之後追加行和單元格。

根據API的響應數據，下面的解決方案可能需要一些更改。

var $list = $('<table>'); 
TFS_Wit_WebApi.getClient().getWorkItem(284).then(function(query) { 
    $list.append('<tr><th>Title</th><th>State</th><th>Created by</th><th>Created date</th></tr>'); 
    for (i = 0; i < query.rev; i++) { 
     TFS_Wit_WebApi.getClient().getRevision(284, 6).then(function(query) { 
      var tr = $list.append('<tr>'); 
      for (j = 0; j < 3; j++) { 
       tr.append('<td>').text(query.fields['System.State'])); 
      } 
     }); 
    } 
}); 
var $container = $('#query-info-container'); 
$container.empty(); 
$container.append($list); 

編輯：另外在for循環異步請求的一個大問題是，如果數據說100行，然後100個請求將被髮送一次獲取一行。更好的辦法是在一個請求中接收所有100行，然後從數據創建表。

編輯：基於服務器的響應，請嘗試以下操作：

var $list = $('<table>'); 
TFS_Wit_WebApi.getClient().getWorkItem(284).then(function(response) { 
    $list.append('<tr><th>Title</th><th>State</th><th>Created by</th><th>Created date</th></tr>'); 
    // I am assuming entire json data is response 
    for (i = 0; i < response.value.length; i++) { 
     var tr = $list.append('<tr>'), data = response.value[i]; 
     for (j = 0; j < 3; j++) { 
      tr.append('<td>').text(data['System.State'])); 
     } 
    } 
}); 
var $container = $('#query-info-container'); 
$container.empty(); 
$container.append($list); 

此外，不要使用 「」在json對象的關鍵中。您應該將data ['System.State']稱爲data.System.State，但由於「數據」中沒有「System」對象，因此您將無法訪問。