C#传值JS导出CSV报需提供对象数组的错误排查

问题场景 #

实现C#端拉取数据、前端JS触发导出CSV到本地的功能，逻辑为C#将数据序列化为JSON传递到客户端页面，JS读取数据后调用导出方法触发下载。执行导出时抛出错误：Invalid export data. Please provide an array of objects，无法定位问题原因。

现有实现代码 #

C# 端代码 #

protected string test()
{
    MyRequest request = new MyRequest();
    request.Id = "TEST";
    var tmp = new ExistingClassOfMine();
    // 调用现有类方法拉取数据，再序列化为JSON字符串
    string data = JsonConvert.SerializeObject(tmp.GetResponse(request));
    // 断点调试拿到的返回值：{"Slot1":[{"Name":"TJ", "ID":"123"},{"Name":"Joe","ID":"456"}], "TotalCount":2}
    return data;
}

JavaScript 端代码 #

function exportToExcel() {
    console.log("Exporting to Excel");
    isExporting = true;
    const fileName = 'NameList';
    const exportType =  'csv';
    var data = <%=this.test()%>;
    var readData = data["Slot1"];
    var myArray = [];

    // 参考网络示例做数组遍历
    for (var i in readData) {
        myArray.push(readData[i]);
    }
    // 调试日志
    console.log("Data from C#");
    console.log(data);
    console.log(typeof (data));
    console.log("Data we want to export");
    console.log(readData);
    console.log("Parsed Data?");
    console.log(myArray);

    // 该行抛出数据格式错误
    window.exportFromJSON({myArray, fileName, exportType});
    isExporting = false;
}

function onRequestStart(sender, args) {
    if (isExporting) {
        args.set_enableAjax(false);
    }
}

调试控制台截图 #

问题根因 #

• 核心错误：exportFromJSON方法要求传入的配置对象中，待导出数据集的字段名必须为data，现有代码传入的字段名为自定义的myArray，库读取不到合法的数组入参，直接抛出格式错误。
• 冗余&风险代码：
  1. 直接通过<%=this.test()%>渲染JSON到JS变量中，没有做显式字符串包裹和JSON解析，特殊字符容易引发JS语法异常
  2. 用for...in遍历数组做拷贝属于多余操作，data.Slot1本身就是标准对象数组，不需要额外遍历存入新数组；且for...in会遍历数组原型链上的可枚举属性，不是数组遍历的推荐写法

修复后代码 #

function exportToExcel() {
    console.log("Exporting to Excel");
    isExporting = true;
    const fileName = 'NameList';
    const exportType =  'csv';
    // 先获取服务端返回的JSON字符串，显式解析为JS对象，避免渲染异常
    const rawJsonStr = '<%=this.test()%>';
    const data = JSON.parse(rawJsonStr);
    // 直接取目标数组，无需额外遍历拷贝
    const exportData = data.Slot1;

    // 按库的API要求传参，数据集字段固定为data
    window.exportFromJSON({
        data: exportData,
        fileName: fileName,
        exportType: exportType
    });
    isExporting = false;
}

function onRequestStart(sender, args) {
    if (isExporting) {
        args.set_enableAjax(false);
    }
}

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