访问子行时，DataTables 格式函数中出现“未捕获的类型错误：无法读取未定义的属性（读取‘长度’）”

Question

问题：

我正在尝试使用 JavaScript 在 DataTables 行扩展中显示有关每位教师资格的详细信息。 ASP.NET Core 中的服务器端代码返回一个 JSON 对象，其中包含教师及其资格的列表，其中包括每个资格的成绩详细信息的嵌套对象。

但是，当我尝试在数据表中展开教师的行时，出现以下 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;
}


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 });
}````

Answer 1

故障排除步骤

要调试此问题，我们需要打开浏览器开发者工具并检查

d.TeacherQualifications

是否为NULL。如果为NULL，就会遇到错误

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

。

建议

请更改您的 GetTeachers 方法，如下所示。

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 ?? new List<TeacherQualification>()).Select(q => new
            {
                q.Institution,
                q.YearOfCompletion,
                Grade = q.Grade != null ? new
                {
                    q.Grade.Name,
                    q.Grade.Description
                } : null
            }).ToList()
        })
        .ToList();

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

并更改您的javacript代码。

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

if (Array.isArray(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 || 'N/A') + "</td></tr>";
        result += "<tr><td><strong>Year Of Completion:</strong></td><td>" + (qualification.yearOfCompletion || 'N/A') + "</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;