Express使用res.render传MySQL RowDataPacket时前端获取空对象问题

问题原因 #

1. MySQL查询返回的GetUserData结果是包含RowDataPacket实例的数组，你直接将完整数组传递给了ejs模板，没有取到数组中实际存储数据的第一个元素。
2. RowDataPacket中存储的data字段是序列化后的JSON字符串，未经过JSON解析的情况下无法直接作为对象读取属性。

修复后的服务端代码 #

const dataList = await GetUserData(req.user.email)
let parsedData = []
// 增加空校验避免查询结果为空时报错
if (Array.isArray(dataList) && dataList.length > 0) {
  // 取第一个RowDataPacket的data字段，解析为JS对象
  try {
    parsedData = JSON.parse(dataList[0].data)
  } catch (e) {
    // 解析失败时的兜底逻辑
    parsedData = []
  }
}
res.render('index.ejs', {email: req.user.email, id: req.user.id, data: parsedData})

修改后模板中就可以直接读取data的属性，前端打印也能拿到完整的对象结构。如果需要将整个RowDataPacket转为普通JS对象使用，也可以通过const plainObj = {...dataList[0]}的方式做浅拷贝后再处理。

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