使用jQuery Ajax筛选展示position为2（教练）的用户列表实现求助

核心错误原因 #

• 你当前将position == 2的判断逻辑写在了遍历用户数组的外层，后端接口返回的data是全部用户组成的数组对象，本身没有position属性，外层的if条件永远不成立，自然不会渲染任何数据
• 筛选逻辑需要作用在单个用户对象上，要放在遍历内部或者提前对数组做过滤

修正后的实现代码 #

我们可以先对返回的用户数组做过滤，拿到所有position为2的教练用户后再遍历渲染，逻辑更清晰易读：

$(document).ready(function () {
    // 调用ajax从后端获取所有员工数据并展示在表格中
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/api/korisnik",
        dataType: "json",
        success: function (data) {
            // 过滤出position为2的教练用户
            const coachList = data.filter(user => user.position === 2);
            // 遍历过滤后的教练列表生成表格行
            for (let responseElement of coachList) {
                let row = "<tr>";
                row += "<td>" + responseElement.ime + "</td>";
                row += "<td>" + responseElement.prezime + "</td>";
                row += "<td>" + responseElement.email + "</td>";
                row += "<td>" + responseElement.position + "</td>";
                let btn = "<button class='btnSeeMore' data-id=" + responseElement.id + ">See More</button>";
                row += "<td>" + btn + "</td>";
                btn = "<button class='btnDelete' data-id=" + responseElement.id + ">Delete</button>";
                row += "<td>" + btn + "</td>";
                row += "</tr>";
                $('#responseElement').append(row);
            }
            console.log("SUCCESS:\n", data);
        },
        error: function (data) {
            console.log("ERROR:\n", data);
        }
    });
});

可选的等价实现 #

如果你不想提前做数组过滤，也可以直接在遍历原数组的环节增加判断，效果完全一致：

for (let responseElement of data) {
    // 仅当当前用户是教练时才渲染行
    if (responseElement.position === 2) {
        // 原有生成行、插入行的逻辑不变
    }
}

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