Question

我的目标是创建包含15行的4列。

但是，现在我只能创建两行。一个标题行和另一个具有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，但您将无法访问，因为“data”中没有“System”对象。

没有创建新行

2 个答案: