使用req.params时JSON数据无法在网页正常显示的问题求助

问题情况 #

学习Node.js时，使用req.params获取路由参数遇到异常：语法确认无误，响应状态码为200，网络面板显示返回JSON文档，但网页无法正常展示数据。

代码示例 #

const express = require('express')
const app = express()
const { products } = require('./data')

app.get('/', (req, res) => {
  res.send('<h1> Home Page</h1><a href="/api/products">products</a>')
})
app.get('/api/products', (req, res) => {
  res.json(products)
  res.status(200)
})

app.get("/api/products/:num", (req, res) => {
    const { num } = req.params
    const reqProduct = products.find(
        (product) => product.id === Number(num)
    )
    res.json(reqProduct)
})

app.listen(5000, () => {
    console.log("The server is listening")
})

测试数据 #

const products = [
    {
        id: "1",
        price: "10",
        description: "qwerty",
        image: "Helooo"
    },
    {
        id: "2",
        price: "20",
        description: "qwerty",
        image: "Helooo"
    },
    {
        id: "3",
        price: "30",
        description: "qwerty",
        image: "Helooo"
    }
]

module.exports = { products }

网页展示情况 #

问题根源 #

测试数据中product.id是字符串类型（如"1"），但代码里将req.params.num通过Number(num)转换为数字类型，使用===全等匹配时，类型不相等导致find方法无法找到对应数据，最终返回undefined，网页因此展示空白。

修复方案 #

方案一：修改测试数据的id为数字类型 #

将测试数据中所有对象的id从字符串改为数字：

const products = [
    {
        id: 1,
        price: "10",
        description: "qwerty",
        image: "Helooo"
    },
    {
        id: 2,
        price: "20",
        description: "qwerty",
        image: "Helooo"
    },
    {
        id: 3,
        price: "30",
        description: "qwerty",
        image: "Helooo"
    }
]

module.exports = { products }

方案二：修改匹配逻辑为字符串比较 #

无需转换req.params.num的类型，直接用字符串进行匹配：

app.get("/api/products/:num", (req, res) => {
    const { num } = req.params
    const reqProduct = products.find(
        (product) => product.id === num
    )
    // 优化：添加不存在数据的处理
    if (!reqProduct) {
        return res.status(404).json({ message: "该商品不存在" })
    }
    res.json(reqProduct)
})

额外优化建议 #

• 原代码中res.json(products)之后的res.status(200)可以删除，因为res.json()默认会设置200状态码
• 添加找不到数据时的404响应处理，避免返回undefined，提升接口的健壮性和用户体验

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