JavaScript中API响应过滤功能失效问题排查

问题描述 #

编写了JavaScript代码调用API生成数据表格，但添加的API响应过滤功能无法正常工作。移除过滤选项时代码运行正常，已确认HTML搜索框输入值正确，推测过滤逻辑存在问题。

原代码 #

/* 调用API并生成表格函数 */
function getData() {
    let input = document.getElementById("searchBar").value;
    getDataFromAPI().then((response)=>{
        response.data.filter(e => e.kolegij.toLowerCase() === input).forEach((data) => {
            generateTableData(data)
        });
    })
}

/* 生成表格数据 */
function generateTableData(data){
    var sel = document.querySelector('#table-body');
    sel.innerHTML +=`<tr>
            <td>${data.kolegij}</td>
            <td>${data.ects}</td>
            <td>${data.sati}</td>
            <td>${data.predavanja}</td>
            <td>${data.vjezbe}</td>
            <td>${data.tip}</td>
            </tr>`
}

/* 调用API函数 */
async function getDataFromAPI(){
    const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
        method: "GET",
        headers: {
            "Content-Type": "text/plain;charset=UTF-8",
            Authorization:
                "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzMyMDM4LCJleHAiOjE2NzQzMzU2MzgsImlhdCI6MTY3NDMzMjAzOH0.4USsfZa1cHhA2eKyEEiuNYmWE8Gfq2SQy47KQSFsq3Y",
        },
    })
    return response.json();
}

问题点与修复方案 #

1. 大小写不匹配：仅将API返回的kolegij转为小写，但未处理搜索输入的大小写，导致严格相等===无法匹配大小写不同的内容。
2. 表格内容未清空：每次调用generateTableData时用innerHTML +=累加内容，过滤后旧数据不会被清除，导致看起来过滤无效。
3. 严格匹配过于局限：使用===要求完全匹配，不符合常规搜索的“包含匹配”预期，用户输入部分内容无法搜到结果。

修改后的代码 #

/* 调用API并生成表格 */
function getData() {
    let input = document.getElementById("searchBar").value.trim().toLowerCase();
    const tableBody = document.querySelector('#table-body');
    // 先清空表格内容
    tableBody.innerHTML = '';
    
    getDataFromAPI().then((response) => {
        // 过滤逻辑：包含匹配，大小写不敏感
        const filteredData = response.data.filter(e => 
            e.kolegij.toLowerCase().includes(input)
        );
        filteredData.forEach(data => generateTableData(data, tableBody));
    });
}

/* 生成表格数据 */
function generateTableData(data, tableBody){
    tableBody.innerHTML += `<tr>
            <td>${data.kolegij}</td>
            <td>${data.ects}</td>
            <td>${data.sati}</td>
            <td>${data.predavanja}</td>
            <td>${data.vjezbe}</td>
            <td>${data.tip}</td>
            </tr>`;
}

/* 调用API */
async function getDataFromAPI(){
    const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
        method: "GET",
        headers: {
            "Content-Type": "text/plain;charset=UTF-8",
            Authorization:
                "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzMyMDM4LCJleHAiOjE2NzQzMzU2MzgsImlhdCI6MTY3NDMzMjAzOH0.4USsfZa1cHhA2eKyEEiuNYmWE8Gfq2SQy47KQSFsq3Y",
        },
    });
    return response.json();
}

额外优化说明 #

• 给输入值加上trim()，去除首尾空格，避免因空格导致的匹配失败。
• 将tableBody元素的查询移到getData函数中并传入generateTableData，减少重复DOM查询，提升性能。

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