DataTables加载gsdata数组报Invalid JSON response错误排查

核心错误点 #

• 配置冲突：你同时给DataTables设置了data和ajax两个数据源参数，DataTables会优先走ajax请求拉取数据，忽略你本地解析好的data1变量，而你配置的AJAX参数不符合接口返回结构，直接触发解析报错。
• AJAX配置与返回结构不匹配：后端返回的数组是包裹在gsdata字段下的对象结构，但你把ajax.dataSrc设为了空字符串，空字符串代表期望接口直接返回数组，结构不匹配导致JSON解析失败。
• 定时刷新逻辑不兼容：你后续调用的table.ajax.reload()完全依赖你配置的ajax参数，只要AJAX配置不正确，每次刷新都会触发报错。

修复方案（二选一即可） #

方案1：全走AJAX模式（适合需要定时刷新的场景，推荐） #

删除本地数据源配置，调整AJAX参数匹配接口结构，代码修改如下：

// 删掉本地data1解析的相关代码，不需要ejs注入初始数据了
var table = $('#scrip-data').DataTable( {
    "searching": false,
    paging: false,
    info: false,
    "processing": true,
    ajax: {
        url: "dashboard",
        dataSrc: "gsdata", // 改为对应外层包裹的字段名
    },
    columns: [
        {data: "SCRIP"},
        {data: "LTP"},
        {data: "CAMARILLA"},
        {data: "ALERT"},
        {data: "PROFIT"},
        {data: "updatedAt"},
    ],
} );

setInterval( function () {
    table.ajax.reload();
}, 20000 );

方案2：本地数据源+手动刷新（不需要修改后端返回结构） #

删掉AJAX配置项，手动实现定时拉取数据更新表格，代码修改如下：

var data1 = <%- gsdata %>; // 无需套单引号和JSON.parse，ejs输出的JSON直接是合法JS对象
var table = $('#scrip-data').DataTable( {
    "searching": false,
    paging: false,
    info: false,
    "processing": true,
    data: data1,
    columns: [
        {data: "SCRIP"},
        {data: "LTP"},
        {data: "CAMARILLA"},
        {data: "ALERT"},
        {data: "PROFIT"},
        {data: "updatedAt"},
    ],
} );

setInterval( function () {
    // 手动发请求拉取最新数据
    $.get('dashboard', function(res) {
        table.clear().rows.add(res.gsdata).draw();
    })
}, 20000 );

额外注意事项 #

如果ejs注入的gsdata字符串中存在单引号，你原来写的JSON.parse('<%- gsdata %>')会因为引号闭合问题直接报错，直接去掉单引号和JSON.parse即可，输出的JSON字面量可以直接作为JS对象使用。

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