JavaScript Filter无返回值：Moodle API下拉联动筛选异常

为减少数据库查询次数，我从Moodle External Web API获取数据，返回数据示例：

0 : {id: 4, userid: 3, instaceid: 1, courseid: 2, coursename: 'Web Development Basics', …} 
1 : {id: 5, userid: 2, instaceid: 1, courseid: 2, coursename: 'Web Development Basics', …}

我需要实现4个下拉框的联动筛选，第一个课程ID下拉框已正常渲染，但选择课程ID（如值为2）后，无法显示关联的用户（应显示3、2），执行console.log(filteredUsers)返回空数组，相关代码如下：

Ajax.call([request])[0].done(function(data) {
    // Populate the course select element
    const courseSelect = document.getElementById('course-select');
    // eslint-disable-next-line no-console
    console.log(courseSelect);
    const courseIds = [...new Set(data.fetchData.map(item => item.courseid))];
    // eslint-disable-next-line no-console
    console.log(courseIds);
    courseIds.forEach(courseId => {
        const option = document.createElement('option');
        option.value = courseId;
        option.textContent = courseId;
        courseSelect.appendChild(option);
    });
    
    courseSelect.addEventListener('change', handleCourseSelection);

    // Function to handle course selection
    /**
     * @param {int} event iid of the course
     */
    function handleCourseSelection(event) {
        const selectedCourseId = event.target.value;
        // eslint-disable-next-line no-console
        console.log(selectedCourseId);
        // Filter users based on the selected course
        const filteredUsers = data.fetchData.filter(item => item.courseid === selectedCourseId);
        console.log(filteredUsers);
        const userSelect = document.getElementById('user-select');
        userSelect.innerHTML = ''; // Clear previous options
        // Populate the user select element
        const userIds = [...new Set(filteredUsers.map(item => item.userid))];
        userIds.forEach(userId => {
            const option = document.createElement('option');
            option.value = userId;
            option.textContent = userId;
            userSelect.appendChild(option);
        });
    }
}).fail(function(data) {
    // eslint-disable-next-line no-console
    console.log(data);
});

• 核心问题：类型不匹配
  从下拉框获取的selectedCourseId是字符串类型（DOM元素的value属性默认都是字符串），而API返回的item.courseid是数字类型，用===严格相等比较时类型不匹配，导致筛选结果为空数组。

• 验证方式
  在handleCourseSelection函数中添加类型打印：

  console.log(typeof selectedCourseId, typeof data.fetchData[0].courseid);
  

  会看到前者输出string，后者输出number。

• 修复方案
  方案1：将选中值转为数字后用严格相等比较（推荐）

  const selectedCourseId = Number(event.target.value);
  const filteredUsers = data.fetchData.filter(item => item.courseid === selectedCourseId);
  

  方案2：使用宽松相等==进行比较（不推荐，可能引入隐性类型转换问题）

  const filteredUsers = data.fetchData.filter(item => item.courseid == selectedCourseId);
  

• 额外防错处理
  若API返回的courseid存在非数字情况，转数字时需做有效性判断：

  const selectedCourseId = parseInt(event.target.value, 10);
  if (isNaN(selectedCourseId)) return; // 无效值直接退出函数
  

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