基于SharePoint Online REST API返回JSON生成重复项计数网格表问题

问题核心原因 #

现有代码缺少按Number分组、按偏移规则统计日期计数的逻辑，且原有HTML表格结构不支持交叉表的展示需求。

修复方案 #

1. 调整HTML结构

直接预留空表格即可，表头和内容全部动态生成：

<table id='dateNumber' class="table table-striped table-sm small">
</table>

注意提前在页面引入moment.js用于日期处理

2. 修正后的JS代码

$(function(){
    // 替换为你自己的SPO站点地址和列表名称
    var requestUri = "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=100&$select=Number,Created";
    $.ajax({
        url: requestUri, 
        type: "GET", 
        headers: {"accept":"application/json; odata=verbose"}, 
        success: onSuccess
    });

    function onSuccess(data) {
        var objItems = data.d.results;
        // 统计映射：key为Number值，value为 日期-计数 映射
        var statMap = {};
        // 收集所有出现过的统计日期、Number值
        var dateSet = new Set();
        var numberSet = new Set();

        // 第一步：遍历原始数据做统计
        for (var i = 0; i < objItems.length; i++) {
            var item = objItems[i];
            var num = item.Number;
            // 按规则处理统计日期：22日03:00~23日02:59归属23日的统计列
            var createdTime = moment(item.Created);
            // 加21小时后格式化，正好匹配偏移规则
            var statDate = createdTime.add(21, 'hours').format("DD/MM/YYYY");
            
            // 初始化映射结构
            if(!statMap[num]) statMap[num] = {};
            if(!statMap[num][statDate]) statMap[num][statDate] = 0;
            // 计数+1
            statMap[num][statDate]++;
            // 收集日期和Number
            dateSet.add(statDate);
            numberSet.add(num);
        }

        // 第二步：排序日期和Number
        var sortedDates = Array.from(dateSet).sort((a,b) => moment(a, "DD/MM/YYYY") - moment(b, "DD/MM/YYYY"));
        var sortedNumbers = Array.from(numberSet).sort((a,b) => a - b);

        // 第三步：拼接表格HTML
        var tableHtml = '';
        // 拼接表头
        tableHtml += '<thead><tr><th>Number</th>';
        sortedDates.forEach(date => {
            tableHtml += `<th>${date}</th>`;
        });
        tableHtml += '</tr></thead><tbody>';

        // 拼接每行内容
        sortedNumbers.forEach(num => {
            tableHtml += `<tr><td>${num}</td>`;
            sortedDates.forEach(date => {
                var count = statMap[num][date] || 0;
                tableHtml += `<td>(${count})</td>`;
            });
            tableHtml += '</tr>';
        });
        tableHtml += '</tbody>';

        // 渲染到页面
        $('#dateNumber').html(tableHtml);
    }
});

逻辑说明 #

• 日期偏移规则通过给原始创建时间加21小时实现，正好满足「当日3点到次日2:59归属次日统计列」的要求
• 先做数据聚合统计再生成表格，避免单元格对应错位
• 自动对日期和Number值排序，保证表格展示顺序符合预期

内容的提问来源于stack exchange，提问作者Jackson Christopher