Datatables AJAX加载数据报错：Cannot read properties of undefined (reading 'length')

问题根源分析 #

控制台报错的核心原因是后端返回的JSON格式不符合Datatables的预期，同时存在一处字段名不匹配的小问题：

1. 后端C#控制器直接返回读取的JSON字符串，ASP.NET会将这个字符串作为JSON值进行转义，导致前端收到的是"{\"data\": [...]}"这种格式的字符串，而非Datatables需要的JSON对象。当Datatables用dataSrc: 'data'读取数据集时，自然找不到对应的数组，从而抛出length未定义的错误。
2. 示例JSON中第四个数据对象的键是"Web Order No."，和columns配置的web_order_no不匹配，会导致该行第一列无法显示数据（非当前报错原因，但会影响最终渲染效果）。

修复方案 #

1. 修正后端C#代码 #

不要直接返回字符串，先将JSON内容反序列化为对象再返回：

// GET: SparesAdminController
[HttpGet]
public JsonResult GetOrders()
{ 
    string jsonString = System.IO.File.ReadAllText(@"C:\projects\AdvisorExtranet\Website\App_Plugins\sparesAdmin\example.json");
    // 反序列化为动态对象（若有实体类，也可强类型反序列化）
    var data = Newtonsoft.Json.JsonConvert.DeserializeObject(jsonString);
    // ASP.NET MVC需加JsonRequestBehavior.AllowGet，ASP.NET Core直接return Json(data);
    return Json(data, JsonRequestBehavior.AllowGet); 
}

2. 统一JSON字段名（推荐） #

修改JSON中第四个对象的字段名，和前端columns配置保持一致：

{
  "web_order_no": "#2381299",
  "customer_ref": "TheirBlinds",
  "created_date": "04/02/23",
  "delivery_date": "17/04/23",
  "order_value": "£162.28",
  "status": "Submitted"
}

3. 确保DOM初始化时机（可选） #

Angular环境下可将Datatables初始化逻辑放入$timeout，避免DOM未渲染完成时执行：

angular.module("umbraco").controller("SparesAdminDashboardController", function ($scope, $timeout) {
    var vm = this;

    $timeout(function() {
        $('#order-table').DataTable({
            ajax: {
                url: '/umbraco/backoffice/api/sparesadmin/getorders',
                dataSrc: 'data'
            },
            columns: [
                { data: 'web_order_no' },
                { data: 'customer_ref' },
                { data: 'created_date' },
                { data: 'delivery_date' },
                { data: 'order_value' },
                { data: 'status' }
            ]
        });
    });
});

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