使用EJS+Express+Axios点击按钮展示API JSON数据遇显示问题求助

问题描述 #

我尝试用EJS展示API返回的JSON数据，通过Axios获取数据。已经编写server.js负责获取数据和渲染页面，以及index.ejs和loaded.ejs两个页面：index页面仅包含一个按钮，点击后需将JSON数据展示到loaded页面，但loaded页面要么显示空白，要么显示[object Object]，求问题排查指引。

当前代码 #

Server.js #

// required module to make calls to a REST API
const axios = require('axios');
// 注意：原代码缺失express和bodyParser的完整引入，需补充
// const express = require('express');
// const bodyParser = require('body-parser');
// const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

// set the view engine to ejs
app.set('view engine', 'ejs');

// index page 
app.get('/', function(req, res) {
    res.render("pages/index.ejs", {});
});

app.post('/process_form', function(req, res){
    var url = "https://statsapi.web.nhl.com/api/v1/teams";
    axios.get(url)
        .then((response)=>{
            let teams = response.data;
            res.render('pages/loaded.ejs', {
                team: teams
            });
        });
  })

app.listen(8080);
console.log('8080 is the magic port');

Index.ejs #

<header>
    
</header>

<main>
<div>
    <form action="/process_form" method="post">
        <h2>Click button below to show Hockey Teams</h2>
        <div class="form-group">
            <input class="btn btn-lg btn-primary btn-block" type="submit">
        </div>
    </form>
</div>
</main>

<footer>

</footer>

Loaded.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>

</head>
<body class="container">

    <header>
        
    </header>

    <main>
        <% if (locals.team) { %>
            <p> <%= team %> </p>
        <% } %>

    </main>

    <footer>
        
    </footer>

</body>
</html>

排查与解决步骤 #

1. 补全server.js的核心依赖引入 #

原代码缺失express的初始化代码，这会导致服务器无法正常启动，直接引发空白页面问题。需补充以下代码在最顶部：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

2. 确认API数据结构并修正数据传递 #

NHL的API返回的是包含teams数组的对象（结构类似{ teams: [...] }），你当前传递的是整个response.data对象，直接输出会显示[object Object]。
修改server.js中的axios回调：

axios.get(url)
    .then((response)=>{
        // 提取实际的球队数组
        let teamsList = response.data.teams;
        res.render('pages/loaded.ejs', {
            teams: teamsList // 将数组传给模板
        });
    })
    // 添加错误处理，避免请求失败时页面空白
    .catch(error => {
        console.error('API请求失败:', error);
        res.render('pages/loaded.ejs', { 
            errorMsg: '获取球队数据失败，请稍后重试' 
        });
    });

3. 修改loaded.ejs的渲染逻辑 #

模板中需要遍历球队数组，而不是直接输出对象。同时增加错误提示：

<main>
    <% if (locals.errorMsg) { %>
        <p style="color: red;"><%= errorMsg %></p>
    <% } else if (locals.teams && teams.length > 0) { %>
        <ul>
            <% teams.forEach(team => { %>
                <li><%= team.name %>（简称：<%= team.abbreviation %>）</li>
            <% }) %>
        </ul>
    <% } else { %>
        <p>暂无球队数据</p>
    <% } %>
</main>

4. 验证数据传递是否正常 #

在server.js的axios回调中添加console.log(response.data.teams)，启动服务器后点击按钮，查看终端输出的数组结构，确认数据是否正确获取。

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