调用iTunes API获取JSON数据后EJS渲染提示songlist未定义如何解决

存在的问题点 #

• 未配置Express POST请求体解析中间件，无法获取表单提交的search参数，导致iTunes接口请求异常，未进入then分支给模板传songlist参数，触发变量未定义报错
• iTunes接口请求未做异常捕获，请求失败时不会给模板传参，同样会触发变量未定义错误
• 搜索关键词未做URI编码，含特殊字符时会导致接口请求失败
• EJS模板中forEach回调参数和外层数组重名，存在作用域覆盖风险
• EJS模板中对象属性访问语法错误，且字段名拼写和返回结构不匹配：songlist[artistName]会将artistName当作变量读取，同时TrackName首字母大写和返回的trackName字段不一致

修复步骤 #

1. 新增请求体解析中间件配置 #

在server.js的路由注册代码前，添加如下配置：

// 解析POST表单提交的请求体
app.use(express.urlencoded({ extended: true }))

2. 修复server.js接口逻辑 #

添加异常捕获、关键词编码、默认值兜底：

app.post('/process_form', function(req, res){
    const search = req.body.search || ''
    // 对搜索关键词做编码，避免特殊字符导致请求失败
    axios.get('https://itunes.apple.com/search?term=' + encodeURIComponent(search))
    .then((response)=>{
        const songlist = response.data.results || [];
        console.log(songlist);
        res.render('pages/thanks.ejs', {
            songlist: songlist,
            search: search
        });
    })
    .catch(err => {
        console.error('iTunes接口请求失败：', err)
        // 异常场景兜底传空数组，避免模板变量未定义
        res.render('pages/thanks.ejs', {
            songlist: [],
            search: search
        })
    })
})

3. 修复EJS模板代码 #

修正循环参数命名、属性访问语法和字段名拼写：

<ul>
    <% songlist.forEach(function(song) { %>
        <li>
            <strong><%= song.artistName %></strong>
            <strong><%= song.trackName %></strong>
        </li>
    <% }); %>
</ul>

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