AJAX读取JSON渲染HTML报错及JSON结构优化问题咨询

报错问题解决（There was a problem: 0） #

• 最常见原因是使用file://协议直接打开本地HTML文件触发浏览器同源策略限制，禁止AJAX读取本地JSON文件。你可以本地启动静态服务访问页面：比如VSCode安装Live Server插件右键HTML选择Open with Live Server，或者在项目目录执行python -m http.server 8000后访问http://localhost:8000即可。
• 检查lab4.json文件路径是否正确：确认该文件和当前HTML文件处于同级目录，文件名大小写完全匹配（Linux/macOS环境对大小写敏感）。
• 检查JSON文件语法是否合法：你目前提供的JSON语法没有问题，如果后续修改过可以用JSON校验工具检查语法错误。

渲染逻辑错误修复 #

你现有代码存在2个语法问题和1个逻辑冗余问题，直接导致渲染失败：

1. 成功回调的返回值参数命名为response，但实际遍历调用了未定义的responseData变量
2. 带中划线的属性名tutoring-text不能直接用点操作符访问，JS会将其识别为减法运算，必须用方括号语法['tutoring-text']访问
3. 现有JSON结构不需要双层遍历，直接读取数组拼接即可

修正后的JS代码 #

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "lab4.json",
        dataType: "json",
        success: function(response){
            var message = "";
            // 直接遍历tutoring-text数组即可，建议用p标签包裹段落优化排版
            $.each(response.text['tutoring-text'], function(x, s) {
                message += `<p>${s}</p>`;  
            });
            $("#tutoring-text").html(message);
        }, 
        error: function(msg) {
            alert("There was a problem: " + msg.status + " " + msg.statusText);
        }
    });
});

JSON结构优化建议 #

你当前的JSON结构完全可用，如果后续需要扩展多模块文本内容，可以调整为扁平结构，减少嵌套层级，渲染逻辑通用性更强：

{
    "tutoring-text": [
        "Gamma Nu Eta holds weekly tutoring sessions every Wednesday.",
        "At these tutoring sessions, GNH can help you with any course in your ITWS degree program.",
        "This includes ITWS core classes, such as Intro to ITWS and Web Systems, or classes outside of ITWS, such as Computer Science 1 and Data Structures.",
        "We can also help with any questions that you might have about career development, resumes, as well as just general questions about RPI."      
    ],
    "activity-text": [
        // 后续扩展其他模块文本直接加对应键即可
    ]
}

调整后渲染代码只需要修改取数组的键名即可，不需要调整嵌套层级的访问逻辑。

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