Node.js Express+EJS项目JSON操作异常致AJAX请求pid参数undefined

问题根因 #

你代码里存在4个核心错误直接导致接口报错：

1. 循环覆盖sessionStorage存储值：遍历parsedData.data.rows时每次都执行sessionStorage.setItem('user', JSON.stringify(userData))，最终sessionStorage里只会保存循环最后一条数据的pid和session，点击任意卡片拿到的都是最后一条数据，大概率不符合你的业务需求。
2. 变量未定义直接调用：graphApi函数里console.log(data1, 'data1 here')的data1没有声明定义，会直接抛出JS运行错误，打断后续代码执行。
3. AJAX请求缺失JSON格式标识头：你传递的是序列化后的JSON字符串，但没有指定contentType: 'application/json'，后端Express无法识别请求体格式，解析不出参数。
4. 错误的id属性绑定：你直接把对象c赋值给DOM的id属性，对象转字符串后会变成[object Object]，这个id值完全无效，你传入graphApi的id参数也没有被使用，属于冗余错误代码。

修复方案 #

1. 前端代码修改 #

遍历生成卡片逻辑

删除循环内对sessionStorage的写入操作，改用自定义属性存储对应卡片的参数：

parsedData.data.rows.forEach((result, idx) => {
  const pid = result.master_id;
  const session = result.session_name;
  const card = document.createElement('div');
  card.classList = 'card';

  const content = `
          <div class="row">
             <div class="card" id="${result.master_id}" onclick="approve(this.id)" >
              <div class="card-body" data-pid="${pid}" data-session="${session}" onclick="graphApi(this)">
                <br>
                <!-- 剩余卡片内容 -->
  `
  // 此处补充你原本的DOM插入逻辑
});

graphApi函数修改

删除未定义变量的打印语句，补全AJAX请求头，从自定义属性取参数：

function graphApi(cardBody) {
  // 从当前点击的卡片节点取自定义属性值
  const reqData = JSON.stringify({
    pid: cardBody.dataset.pid,
    session: cardBody.dataset.session
  });

  $.ajax({
    type: 'POST',
    data: reqData,
    contentType: 'application/json; charset=utf-8', // 必须加该头标识JSON格式请求
    dataType: 'json',
    url: 'http://localhost:5000/graphFromcsvfile',
    success: function (data) {
      alert('success');
      console.log(data, 'graph api');
    },
    error: function (err) {
      alert('graph api failed to load');
      console.log(err);
    },
  });
}

2. 后端代码检查 #

确保你的Express服务已经配置了JSON请求体解析中间件，该代码需要放在路由定义之前：

app.use(express.json())

如果没有添加该中间件，Express无法解析JSON格式的请求体，req.body会为空对象，读取pid自然返回undefined。

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