如何在Node.js Express中使用Jade将URL/API数据转为表格？

看起来你卡在了API响应解析和模板渲染的环节，别着急，我们一步步来解决：

问题根源 #

你请求Heroku API得到的body是JSON格式的字符串，直接传给Pug模板的话，它只会显示原始文本，而不是结构化的数据。另外，变量名body容易和Pug模板的默认上下文冲突（比如布局中的block content对应的内容区域），这也可能导致渲染异常。

第一步：修改index.js解析JSON并处理错误 #

我们需要把返回的字符串转成JavaScript对象，同时加入错误处理避免服务器崩溃：

var express = require('express');
var router = express.Router();
var request = require('request');

/* GET home page. */
router.get('/', function(req, res, next) {
  request('https://status.heroku.com/api/v3/issues?since=2012-04-24&limit=1', function (error, response, body) {
    // 处理请求失败的情况
    if (error) {
      return next(error); // 把错误交给Express的错误处理中间件
    }
    // 检查API响应是否成功
    if (response.statusCode !== 200) {
      return res.status(response.statusCode).send('获取Heroku状态数据失败');
    }
    try {
      // 将JSON字符串解析为JS对象
      const herokuIssues = JSON.parse(body);
      res.render('index', { 
        title: 'oded', 
        herokuIssues: herokuIssues // 使用更清晰的变量名，避免冲突
      });
    } catch (parseError) {
      // 处理JSON解析失败的情况
      next(parseError);
    }
  });
});

module.exports = router;

第二步：修改index.pug正确渲染数据 #

现在我们可以在模板中访问解析后的对象，先格式化显示整个数据结构，再逐步展示具体字段：

extends layout

block content
  h1= title
  p Welcome to Heroku Status Viewer
  // 先显示格式化的JSON，方便你查看数据结构
  pre= JSON.stringify(herokuIssues, null, 2)
  // 如果有数据，展示第一个issue的具体信息
  if herokuIssues.length > 0
    h2 最新Heroku状态问题
    p 标题: #{herokuIssues[0].title}
    p 创建时间: #{herokuIssues[0].created_at}
    p 状态: #{herokuIssues[0].status}

为什么这样能解决问题？ #

1. JSON解析：JSON.parse(body)把API返回的字符串转成了可操作的JS对象，模板才能读取里面的具体字段。
2. 变量名优化：用herokuIssues替代body，避免了和Pug模板默认上下文的冲突。
3. 错误处理：加入了请求失败和解析失败的处理逻辑，能帮你快速排查问题（比如API请求超时、返回非JSON格式数据等）。

现在启动你的服务器，访问首页就能看到结构化的Heroku状态数据了，之后你就可以基于这个数据来生成表格啦。

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