如何将Express.js对象变量渲染至网页并打印键值？

首先，你的代码里存在一个核心问题：Mystore.Products.All() 是异步操作（返回Promise），当前写法没有正确等待异步操作完成就尝试响应客户端，而且 title 变量其实是一个Promise，不是实际的产品数据。

下面分两种常见场景给出完整的解决方案：

场景1：使用模板引擎渲染美观的页面（推荐） #

假设你使用Express常用的EJS模板引擎（如果用其他模板引擎，逻辑类似）：

第一步：修正路由的异步处理 #

// 添加async关键字，让路由函数支持await语法
app.get('/', async function(req, res) {
  try {
    // 等待异步操作完成，拿到实际的products对象
    const products = await Mystore.Products.All();
    console.log(products); // 控制台正常打印对象
    
    // 将products对象传给模板进行渲染
    res.render('index', { products });
  } catch (error) {
    // 处理可能的错误
    console.error('获取产品失败:', error);
    res.status(500).send('加载产品数据失败，请稍后重试');
  }
});

第二步：配置模板引擎（以EJS为例） #

确保你已经安装了EJS，并在Express中完成基础配置：

const express = require('express');
const app = express();

// 设置视图引擎为EJS
app.set('view engine', 'ejs');
// 设置视图文件的存放目录（默认是项目根目录下的views文件夹）
app.set('views', './views');

第三步：编写模板文件（views/index.ejs） #

在模板中可以灵活遍历对象的键和值，既可以打印完整对象，也可以逐个展示属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品数据展示</title>
    <style>
        pre { background: #f5f5f5; padding: 15px; border-radius: 5px; }
        .product-card { border: 1px solid #ddd; padding: 10px; margin: 10px 0; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>产品数据详情</h1>

    <!-- 打印格式化后的完整对象 -->
    <h2>完整对象数据</h2>
    <pre><%= JSON.stringify(products, null, 2) %></pre>

    <!-- 单独展示产品列表 -->
    <h2>产品列表</h2>
    <% products.data.forEach(product => { %>
        <div class="product-card">
            <h3><%= product.name %></h3>
            <p><strong>类型:</strong> <%= product.type %></p>
            <p><strong>Slug:</strong> <%= product.slug %></p>
            <p><strong>描述:</strong> <%= product.description %></p>
        </div>
    <% }) %>

    <!-- 展示导航链接信息 -->
    <h2>导航链接</h2>
    <ul>
        <li>当前页: <%= products.links.current ? `<a href="${products.links.current}">${products.links.current}</a>` : '无' %></li>
        <li>首页: <%= products.links.first ? `<a href="${products.links.first}">${products.links.first}</a>` : '无' %></li>
        <li>末页: <%= products.links.last || '无' %></li>
    </ul>

    <!-- 展示元数据 -->
    <h2>统计信息</h2>
    <p>本次返回结果数: <%= products.meta.results.total %></p>
    <p>总结果数: <%= products.meta.results.all %></p>
</body>
</html>

场景2：直接返回JSON（适合API调试） #

如果只是想快速在浏览器中查看对象的键值，不需要美观的页面，可以直接返回JSON格式：

app.get('/', async function(req, res) {
  try {
    const products = await Mystore.Products.All();
    // 浏览器会自动格式化展示JSON内容
    res.json(products);
  } catch (error) {
    res.status(500).json({ error: '获取产品数据失败' });
  }
});

关键知识点梳理 #

• 异步处理：异步操作必须等待完成后才能使用结果，async/await 是目前最清晰的异步写法，也可以用 .then() 链式调用（可读性稍差）：

  app.get('/', function(req, res) {
    Mystore.Products.All()
      .then(products => {
        res.render('index', { products });
      })
      .catch(error => {
        console.error(error);
        res.status(500).send('加载失败');
      });
  });
  

• 模板引擎作用：模板引擎可以帮你把JavaScript对象数据嵌入到HTML中，生成动态页面，避免手动拼接HTML字符串的麻烦。

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