如何解决Web项目中获取指定球鞋JSON值的报错问题

核心问题拆解 #

1. XHR请求时sneaker未定义：loadData函数发起请求时，sneaker变量还未被创建（它仅在XHR响应回调里才会定义），因此无法访问sneaker.ID。
2. displaySneaker中sneaker.ID为undefined：服务器返回的是Object.values(sneakers[id])，将对象转为了数组，导致前端拿到的sneaker是数组而非包含ID属性的原始对象。

分步修复方案 #

1. 从页面URL提取ID，修复XHR请求逻辑 #

当前页面通过/id=XXX路径打开，直接从URL中截取ID参数：

function loadData() {
  // 从URL路径中提取ID（适配/id=XXX格式）
  const id = window.location.pathname.split('=')[1];

  const xhr = new XMLHttpRequest();
  xhr.onload = function () {
    if (xhr.status == 200) {
      const sneaker = JSON.parse(xhr.responseText);
      displaySneaker(sneaker);
    } else {
      // 错误处理逻辑
    }
  };

  // 使用提取到的ID发起请求
  xhr.open("GET", `/sneaker/id=${id}`);
  xhr.send();
}

2. 调整服务器返回数据格式，保留完整对象 #

服务器端不要用Object.values转换，直接返回原始球鞋对象：

app.get('/sneaker/id=:ID', function (req, res) {
  const id = req.params.ID;
  const exists = id in sneakers;
  // 直接返回完整对象，保留ID属性
  res.json(sneakers[id]);
});

3. 验证前端渲染逻辑 #

现在前端拿到的是包含ID的完整对象，sneaker.ID可正常调用：

function displaySneaker(sneaker) {
    const bodyElement = document.querySelector("main");

    let linkDiv = document.createElement("div");
    let link = document.createElement("a");
    // 此时sneaker.ID已正常存在
    link.setAttribute("href", `/id=${sneaker.ID}`);
    // 剩余渲染代码...
}

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