Ajax请求报错TypeError: Cannot read properties of undefined (reading 'forEach')的原因与解决

错误原因 #

这个Uncaught TypeError的核心问题是**response.data的值为undefined**，调用forEach方法时自然触发报错。具体触发场景包括：

• 后端Django视图返回的JSON结构和前端预期不符：比如后端直接返回问题列表数组，而非{"data": [...]}格式的对象，此时response.data不存在。
• 请求URL无效：${url}data/拼接出的地址可能未匹配到Django的视图路由，导致后端返回404/500错误响应，返回内容不是预期JSON，response.data为undefined。
• 后端未返回合法JSON：视图未使用JsonResponse返回数据，或返回了HTML/文本内容，前端解析后无法获取data属性。

解决步骤 #

• 排查后端响应内容：打开浏览器开发者工具的「Network」面板，找到该GET请求，查看「Response」标签的内容，确认返回的JSON结构是否包含data字段。如果后端直接返回数组，将前端的data = response.data改为data = response即可。
• 验证请求URL正确性：检查拼接后的完整URL，确认Django的URL配置中存在对应路径的视图，且视图允许GET请求。
• 确保后端返回正确格式的JSON：在Django视图中必须用JsonResponse返回包裹好的数据，示例代码：

from django.http import JsonResponse

def quiz_data_view(request):
    # question_list为你的问题数据列表
    return JsonResponse({"data": question_list})

• 前端增加容错处理：调用forEach前校验数据有效性，避免因数据异常报错，同时修正内容覆盖问题：

$.ajax({
    type: 'GET',
    url: `${url}data/`,
    success: function(response){
        // 打开注释查看实际响应内容，方便排查
        console.log(response)
        // 兜底处理，确保data是数组
        const data = response.data || [];
        if (Array.isArray(data)) {
            data.forEach(el => {
                for (const [question, answers] of Object.entries(el)){
                    // 用+=替代=，避免覆盖之前的问题内容
                    quizBox.innerHTML += `<b>${question}</b>`;
                }
            });
        }
    },
    error: function(error){
        console.log(error)
    },
})

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