SPO报表生成页面开发报错：无法从objItems对象映射listTDRender数组对应值，触发Uncaught TypeError异常

嘿，我一眼就看到问题出在哪了！你遇到的这个TypeError，核心原因是错误地用了点语法去访问动态属性，另外还有个循环闭包的小坑需要填上，咱们一步步来解决：

1. 直接触发错误的根源 #

你写的objItems[i].listTDRender[k]这段代码，JavaScript会把listTDRender当成objItems[i]的一个属性名来查找，但实际上listTDRender是你定义的一个数组变量，你想要的是用listTDRender[k]的字符串值（比如"DistrDate"、"Rev"）作为属性名去取objItems[i]里对应的值。

正确的写法应该是用方括号语法来动态访问属性：

objItems[i][listTDRender[k]]

这个语法才会把listTDRender[k]的计算结果当成属性名，去对象里匹配对应的值。

2. 隐藏的闭包陷阱 #

另外，你用var声明循环变量j、i、k，在异步回调里会遇到变量共享的问题——虽然你设置了async: false强制同步，但如果后续改成异步的话，代码就会出问题。更稳妥的做法是把var换成let，让每个循环迭代都有自己的变量作用域。

修改后的完整代码 #

function loadReport() {
    // 用let代替var，避免闭包变量泄漏
    for (let j = 0; j < list.length; j++) {
        const listVal = list[j].split(",");
        const listFieldRender = listVal[2].replaceAll('|',',');
        const listTDRender = listVal[2].split("|"); // 改成const，因为不会重新赋值
        $.ajax({
            async: false,
            url: "SPO/_api/web/lists/getbytitle('" + listVal[0] + "')/items?$select=Created,EncodedAbsUrl,"+ listFieldRender +"&$top=2&$orderby=Created%20desc",
            type: "GET",
            headers: {"accept": "application/json;odata=verbose"}, // 去掉空格，避免解析问题
            success: function(data) {
                const objItems = data.d.results;
                let tableContent = '<table id="' + listVal[1] + '" style="width:100%"><caption class="text-info">' + listVal[1] + '</caption>';
                // 同样用let声明循环变量
                for (let i = 0; i < objItems.length; i++) {
                    tableContent += '<tr>';
                    for (let k = 0; k < listTDRender.length; k++) {
                        // 这里用方括号动态访问属性
                        const fieldValue = objItems[i][listTDRender[k]];
                        // 可以加个兜底，避免属性不存在时显示undefined
                        tableContent += '<td>' + (fieldValue || '') + '</td>';
                    }
                    tableContent += '</tr>';
                }
                // 记得闭合table标签！你原来的代码没加</table>
                tableContent += '</table>';
                $('#renderReport').append(tableContent);
            },
            error: function(error) {
                alert(JSON.stringify(error));
            }
        });
    }
}

额外的优化建议 #

• 我给代码加了一个兜底处理(fieldValue || '')，如果某个属性在返回结果里不存在，会显示空字符串而不是undefined
• 注意API请求头里的空格：application / json;odata = verbose里的空格可能导致解析问题，我改成了application/json;odata=verbose
• 你原来的代码没有闭合<table>标签，我补上了tableContent += '</table>'，避免HTML结构错误

验证一下 #

用你的样本数据测试的话，objItems[i][listTDRender[k]]会正确取到objItems[i].DistrDate、objItems[i].Rev这些值，不会再抛出undefined的错误了。

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