生成包含重复项计数的 Table 网格（JSON 数据）

Question

我需要使用从 Sharepoint Online REST API 服务接收的 JSON 数据构建以下格式的网格 table。

需求示例，在22/05/202103:00Z至23/05/202102:59Z之间创建的数据应统计并显示在23/05/2021以下

JSON样本

{
    "d": {
        "results": [
            {
                "__metadNumber": {},
                "Number": 21,
                "Created": "2021-05-21T14:47:55Z"
            },
            {
                "__metadNumber": {},
                "Number": 21,
                "Created": "2021-05-21T13:47:55Z"
            },
            {
                "__metadNumber": {},
                "Number": 28,
                "Created": "2021-05-22T14:48:44Z"
            }
        ],
        "__next": ""
    }
}

需要Table格式

Number	21/05/2021	22/05/2021
21	(2)	(0)
28	(0)	(1)

以下代码是我目前拥有的。问题是，这不会在相应的单元格中填充计数。

    $(function(){
        var requestUri = "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=100&$select=*";
        $.ajax({url: requestUri, type: "GET", headers: {"accept":"application/json; odata=verbose"}, success: onSuccess,});

      function onSuccess(data) {
         var objItems = data.d.results;
         var tableContent;
         var tableRow;
         for (var i = 0; i < objItems.length; i++) {
             tableContent += '<td>' + moment(objItems[i].Created).format("DD/MM/YYYY") + '</td>';
             tableRow += '<tr><td>' + objItems[i].Number + '</td></tr>';
        }
       $('#Date').append(tableContent);
       $('#number').append(tableRow);
       }
    });  

<table id='dateNumber' class="table table-striped table-sm small">
   <tr>
      <td id="Date"></td>
   </tr>
   <tr>
      <td id="number"></td>
   </tr>
</table>

Answer 1

您可以在 onSuccess 函数中执行以下操作：

var objItems = data.d.results;

var groups = [];
var dates = [];

objItems.forEach(function (item) {
  var number = item.Number;
  var date = moment(item.Created).format("DD/MM/YYYY");

  var group = groups[number] || [];
  var created = group[date] || 0;

  group[date] = created + 1;

  groups[number] = group;

  if (dates.indexOf(date) === -1) {
    dates.push(date);
  }
});

var tableRows = "<tr><td>Number</td>";

dates.forEach(function (date) {
  tableRows += "<td>" + date + "</td>";
});

tableRows += "</tr>";

groups.forEach(function (group, number) {
  tableRows += "<tr><td>" + number + "</td>";

  dates.forEach(function (date) {
    tableRows += "<td>" + (group[date] || 0) + "</td>";
  });

  tableRows += "</tr>";
});

// TODO: append the table rows to the table

这将生成具有所需格式的 table 行（具有正确的 header 行）。

tableRows 的示例输出：

<tr><td>Number</td><td>21/05/2021</td><td>22/05/2021</td></tr><tr><td>21</td><td>2</td><td>0</td></tr><tr><td>28</td><td>0</td><td>1</td></tr>

这将导致 table： Example output image

生成包含重复项计数的 Table 网格（JSON 数据）

Generate Table grid with count of repeating items (JSON Data)

javascript

jquery

json

html-table

sharepoint-online