JS实现按categoryId筛选API作品数据的问题求助

问题描述 #

我正在学习JavaScript，已经完成从/api/works接口获取全部作品并在div展示的功能。现在给3个分类动态创建了按钮，需要添加点击事件实现按对应categoryId展示作品，但用http://localhost:5678/api/works?categoryId=1带参数请求时，返回的还是全部作品，求解决方法。

附返回数据格式：

[
  {
    "id": 1,
    "title": "Abajour Tahina",
    "imageUrl": "http://localhost:5678/images/abajour-tahina1651286843956.png",
    "categoryId": 1,
    "userId": 1,
    "category": {
      "id": 1,
      "name": "Objets"
    }
  }
]

尝试的代码片段：

document.getElementById("button").addEventListener("click", function(){
    // 清空容器元素
    document.getElementById("works").innerHTML = "";
    // 请求categoryId为1的作品列表
    fetch("http://localhost:5678/api/works?categoryId=1")
    .then(response => response.json())
    .then(data => {
        // 遍历作品列表
        data.forEach(function(work) {
            // 为每个作品创建HTML元素
            var workElement = document.createElement("div");
            workElement.innerHTML = "作品ID: " + work.id + "<br>" + "标题: " + work.title + "<br>" + "内容: " + work.content;
            // 将元素添加到页面
            document.getElementById("works").appendChild(workElement);
        });
    })
    .catch(error => console.log(error)); 

可能原因及解决方法 #

1. 后端接口未实现参数筛选逻辑

如果后端没做categoryId参数的过滤处理，不管传什么参数都会返回全部作品。这种情况下可以先在前端本地实现筛选：

// 全局存储所有作品数据
let allWorks = [];

// 页面初始化时获取全部作品
fetch("http://localhost:5678/api/works")
  .then(res => res.json())
  .then(data => {
    allWorks = data;
    renderWorks(allWorks); // 先渲染全部作品
  })
  .catch(err => console.error("获取作品失败:", err));

// 通用渲染函数
function renderWorks(works) {
  const container = document.getElementById("works");
  container.innerHTML = "";
  works.forEach(work => {
    const workDiv = document.createElement("div");
    // 用模板字符串更简洁
    workDiv.innerHTML = `
      作品ID: ${work.id}<br>
      标题: ${work.title}<br>
      分类: ${work.category.name}
    `;
    container.appendChild(workDiv);
  });
}

// 给动态创建的分类按钮绑定事件（假设按钮有data-category-id属性）
// 动态创建按钮时记得加上data-category-id="${categoryId}"
document.querySelectorAll(".category-button").forEach(btn => {
  btn.addEventListener("click", () => {
    const targetId = parseInt(btn.dataset.categoryId);
    // 过滤出对应分类的作品
    const filtered = allWorks.filter(work => work.categoryId === targetId);
    renderWorks(filtered);
  });
});

2. 参数名称不匹配

检查后端接口文档，确认筛选分类的参数名是不是categoryId，有些后端可能用下划线命名（比如category_id），如果是这种情况，把请求URL改成http://localhost:5678/api/works?category_id=1再试。

3. 排查请求是否正确发送

打开浏览器开发者工具的Network面板，点击按钮后查看发送的请求：

• 确认Request URL里确实包含了categoryId=1参数
• 查看Response内容，确认后端返回的是不是筛选后的数据

如果参数没问题但返回还是全部，那就是后端的问题，需要和后端开发人员沟通修复接口筛选逻辑。

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