将JS对象课程标题追加到模态框遇问题：_categories.Courses.results未定义

为什么_categories.Courses会报错？ #

先看你从接口拿到的数据结构：_categories = cat.data.d.results——这个results是一个数组，数组里的每一个元素才是单个的分类对象（比如_categories[0]就是Animals分类）。

数组本身并没有Courses属性，只有数组里的每个分类对象才拥有Courses属性，所以直接访问_categories.Courses自然会提示results未定义（因为_categories.Courses根本不存在，更别说它的results了）。

你的代码逻辑问题 #

你现在的trainingCrs = _categories[0].Courses.results.map(...)只获取了第一个分类的课程列表，然后在循环所有分类时用trainingCrs[i]，这必然会出问题：当i>0时，trainingCrs里根本没有对应索引的元素，所以会返回undefined。

修正后的实现方案 #

我们需要为每个分类单独处理它的课程列表，这里提供两种可靠的方式：

方式1：循环时直接生成课程HTML并存在data属性中

修改loadCategories函数的循环部分，每次处理当前分类的课程：

loadCategories(){ 
    let categs = _categories;
    let catBoxElems = ""; 
    for (var i = 0; i < categs.length; i++) { 
        // 把当前分类的课程转成<li>标签字符串
        const courseListHtml = categs[i].Courses.results
            .map(course => `<li>${course.Title}</li>`)
            .join('');
        
        catBoxElems += `<div class='cat-box cat-num-${i}' 
            data-target='#modal-id' 
            data-toggle='modal' 
            data-desc='${categs[i].Description}'
            data-crs-html='${courseListHtml}'
            data-title='${categs[i].Title}'>
            ${catPic}<br>${categs[i].Title}
        </div>`; 
    } 

    $(document).find("#modal-id")
        .off("shown.bs.modal")
        .on("shown.bs.modal", function(e) { 
            const $target = $(e.relatedTarget);
            $(document).find(".modal-title").html($target.data("title")); 
            $(document).find(".category-desc").html($target.data("desc")); 
            // 直接插入预先生成的课程HTML
            $(document).find(".training-titles-ul").html($target.data("crs-html")); 
        })
        .on("hidden.bs.modal", function(e) { 
            $(document).find(".modal-title").html(""); 
            // 清空课程列表和描述，避免残留
            $(document).find(".category-desc").html("");
            $(document).find(".training-titles-ul").html("");
        }); 

    let container = document.querySelector("div.top-training"); 
    container.innerHTML = catBoxElems; 
    $(" .modal-img").append(catPic) 
}

方式2：用映射存储分类与课程的关系（更推荐，避免data属性的转义/长度问题）

如果课程数量多，或者课程标题包含特殊字符，用data属性存HTML可能会有问题，这时候可以先创建一个映射表：

loadCategories(){ 
    let categs = _categories;
    // 创建分类标题到课程列表的映射
    const categoryCoursesMap = {};
    categs.forEach(category => {
        categoryCoursesMap[category.Title] = category.Courses.results.map(c => c.Title);
    });

    let catBoxElems = ""; 
    for (var i = 0; i < categs.length; i++) { 
        catBoxElems += `<div class='cat-box cat-num-${i}' 
            data-target='#modal-id' 
            data-toggle='modal' 
            data-desc='${categs[i].Description}'
            data-title='${categs[i].Title}'>
            ${catPic}<br>${categs[i].Title}
        </div>`; 
    } 

    $(document).find("#modal-id")
        .off("shown.bs.modal")
        .on("shown.bs.modal", function(e) { 
            const $target = $(e.relatedTarget);
            const currentTitle = $target.data("title");
            const courses = categoryCoursesMap[currentTitle];
            
            $(document).find(".modal-title").html(currentTitle); 
            $(document).find(".category-desc").html($target.data("desc")); 
            // 动态生成课程列表HTML
            const courseHtml = courses.map(course => `<li>${course}</li>`).join('');
            $(document).find(".training-titles-ul").html(courseHtml); 
        })
        .on("hidden.bs.modal", function(e) { 
            $(document).find(".modal-title").html(""); 
            $(document).find(".category-desc").html("");
            $(document).find(".training-titles-ul").html("");
        }); 

    let container = document.querySelector("div.top-training"); 
    container.innerHTML = catBoxElems; 
    $(" .modal-img").append(catPic) 
}

额外注意点 #

• 接口请求里的mode: "no-cors"可能会导致后续处理数据时出现问题，如果你的接口允许跨域，建议移除这个配置。
• 拼接HTML字符串时，如果分类的Description或课程标题包含特殊字符（比如引号、尖括号），可能会导致HTML结构破坏，建议使用encodeURIComponent转义，或者用DOM方法创建元素而不是拼接字符串。

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