NodeJS新手基于EJS渲染WazirX tickers API全量代币的实现问题

你现在没法渲染全量行情，本质是搞错了接口返回的数据结构：

• WazirX的tickers接口返回的是以交易对标识为键、行情详情为值的普通对象，不是数组，没有原生的length属性
• 你原来EJS模板里写的for(let i=0; i<data.length; i++)循环条件永远不成立，自然啥内容都渲染不出来

1. 修复服务端代码的几个常见坑 #

• 端口赋值逻辑写反了：现在的const PORT = 3000 || process.env.PORT永远会固定用3000端口，读不到部署环境分配的动态端口，改成const PORT = process.env.PORT || 3000
• 外层try块位置不对：request是异步执行回调的，你把request.get整个包在try里根本捕不到回调里的JSON解析异常，容易导致服务崩溃
• 请求出错时没有兜底返回：现在request报错时你只打印了日志，没有终止后续流程，容易触发空值解析错误

修改后的核心路由代码：

app.get("/", (req, res)=>{
    let url = "https://api.wazirx.com/api/v2/tickers";
    request.get(url,{},(err, resp, body)=>{
        if(err){
            console.log(err);
            // 出错时传空数据给模板，走兜底展示逻辑
            return res.render("home.ejs", {"data": null});
        }
        try{
            // JSON解析是同步操作，单独包try才能捕获解析错误
            let jsonObject = JSON.parse(body);
            // 可选优化：把键值对对象转成结构清晰的数组，新手更熟悉数组遍历逻辑
            let tickerList = Object.entries(jsonObject).map(([pairId, detail]) => ({
                pairId,
                sellPrice: detail.sell,
                buyPrice: detail.buy,
                lastPrice: detail.last,
                high24h: detail.high,
                low24h: detail.low,
                volume24h: detail.volume
            }))
            res.render("home.ejs", {"data": tickerList});
        }catch(parseErr){
            // 解析失败也走兜底页面
            res.render("home.ejs", {"data": null});
        }
    });
});

2. 调整EJS模板适配数据结构 #

如果按照上面的优化把对象转成了数组，你原来的循环逻辑稍作调整就能正常展示，完整模板代码：

<html>
    <head>
        <title>Wazirx Tickers API</title>
        <style>
            /* 加简单样式避免内容挤成一团 */
            .ticker-item {
                padding: 12px;
                border-bottom: 1px solid #eee;
            }
        </style>
    </head>
    <body>
        <% if(data && data.length > 0) { %>
            <% for(let i=0; i<data.length; i++) { %>
                <div class="ticker-item">
                    <p>交易对：<%= data[i].pairId %></p>
                    <p>卖价：<%= data[i].sellPrice %></p>
                    <p>买价：<%= data[i].buyPrice %></p>
                    <p>最新成交价：<%= data[i].lastPrice %></p>
                    <p>24h波动范围：<%= data[i].low24h %> ~ <%= data[i].high24h %></p>
                </div>
            <% } %>
        <% } else{ %>
            <h4>sorry, cannot find what you wanted!</h4>
        <% } %>
    </body>
</html>

要是不想在服务端做对象转数组的操作，也可以直接在EJS模板里用Object.entries(data)遍历原始接口返回的对象，最终效果完全一致。

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