未创建新行

Question

My goal is to create 4 columns with 15 rows.

However, right now I'm able to create only two rows. One header row and another long row with 15 columns.

New rows are not being created and it is inserting all the values into one row.

I'm really confused why it is only inserting it into one row, even though I opened and closed tag outside of the row that creates the columns.

Can someone explain me why it is not creating new rows? Any help will be greatly appreciated!

Here is my code:

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

EDITED:

Here is the json file that I'm trying to access and display the information:

{
  "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"

and the same format continues...

Answer 1

You need to append your td elements to the tr elements (and you shouldn't try to explicitly close the tags)

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

Think of it as building the tree structure, creating the top level nodes first, then adding the child nodes to their parents.

Answer 2

Since you have one async request inside another and your code doesn't append when the promise is resolved, you will almost always have 15 rows created together and ajax requesting processing in parallel, which when data is available will populate the data in the last row everytime.

I believe a single api request should be sufficient. However, if you have no choice in that matter then you should be appending the row and cells after the api sends the response.

Solution below might need some change depending on the API's response data.

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

EDIT: Also a big problem for async request in for loop is that if data has say 100 rows, then 100 requests will be sent to fetch one row at a time. Better is to receive all 100 rows in one request and then create the table from the data.

EDIT: Based on the server response, try the following:

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

Also, do not use "." in the key of json object. You should refer to data['System.State'] as data.System.State, but you won't be able to because there is no "System" object in the "data".