DataTables展开子行时触发Uncaught TypeError读取length属性错误

尝试用JavaScript的DataTables行展开功能展示教师资质详情，ASP.NET Core后端返回包含教师列表及嵌套Grade对象的资质JSON，但展开行时出现错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

相关代码 #

前端JavaScript行展开渲染代码 #

let result = `<div></div>`;
result += "<table>";

if (d.TeacherQualifications && d.TeacherQualifications.length > 0) {
    for (let i = 0; i < d.TeacherQualifications.length; i++) {
        const qualification = d.TeacherQualifications[i];

        result += "<tr><td><strong>Institution:</strong></td><td>" + qualification.institution + "</td></tr>";
        result += "<tr><td><strong>Year Of Completion:</strong></td><td>" + qualification.yearOfCompletion + "</td></tr>";
        result += "<tr><td><strong>Grade :</strong></td><td>" + (qualification.grade?.name || 'N/A') + "</td></tr>";
        result += "<tr><td><strong>Description:</strong></td><td>" + (qualification.grade?.description || 'N/A') + "</td></tr>";

        if (i < d.TeacherQualifications.length - 1) {
            result += "<tr><td colspan='2'>&nbsp;</td></tr>";
        }
    }
} else {
    result += "<tr><td colspan='2'>No qualifications available.</td></tr>";
}

result += "</table>";
return result;

后端ASP.NET Core接口代码 #

public IActionResult GetTeachers()
{
    var teachers = _context.Teachers
        .Include(x => x.TeacherQualifications)
        .ThenInclude(g => g.Grade)
        .Select(x => new
        {
            x.Id,
            x.Name,
            x.FatherName,
            x.Cnic,
            x.Email,
            x.DateOfBirth,
            x.DateOfJoin,
            TeacherQualifications = x.TeacherQualifications.Select(q => new
            {
                q.Institution,
                q.YearOfCompletion,
                Grade = new
                {
                    q.Grade.Name,
                    q.Grade.Description
                }
            }).ToList()
        })
        .ToList();

    return Json(new { data = teachers });
}

问题排查与解决 #

1. 核心原因：JSON字段大小写不匹配 #

ASP.NET Core默认JSON序列化会将C#的大驼峰命名转为小驼峰（比如TeacherQualifications会变成teacherQualifications），但前端代码中直接访问d.TeacherQualifications，导致读取到undefined，进而触发读取length属性的错误。

解决方式二选一：

• 前端适配小驼峰：将所有d.TeacherQualifications替换为d.teacherQualifications
• 后端保留大驼峰：在Program.cs中配置JSON序列化规则：

  builder.Services.AddControllers().AddJsonOptions(options =>
  {
      options.JsonSerializerOptions.PropertyNamingPolicy = null;
  });
  

2. 强化空值兜底逻辑 #

为避免极端情况（如部分教师无资质时字段为null），可以优化前端判断逻辑，增加兼容处理：

// 兼容大/小驼峰，同时兜底空数组
const qualifications = d.TeacherQualifications || d.teacherQualifications || [];
if (qualifications.length > 0) {
    // 原有循环渲染逻辑
}

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