如何将Node.js的响应对象转换为纯HTML表格格式展示

Hey there! Converting your JSON product response to an HTML table is totally doable—here are two common approaches you can use, depending on your needs:

1. Manual HTML String Concatenation (No Extra Dependencies) #

If you want a quick fix without adding any packages, you can build the HTML table directly in your route handler. This works great for simple use cases:

userRouter.get('/allProducts', function(req, res) {
    console.log("inside all products")
    productModel.find({}, function(err, productList) {
        if (err) {
            res.send(err);
        } else {
            // Start building the HTML structure
            let html = `<!DOCTYPE html>
                        <html>
                        <head>
                            <title>All Products</title>
                            <style>
                                table {border-collapse: collapse; width: 100%; margin: 20px 0;}
                                th, td {border: 1px solid #ddd; padding: 10px; text-align: left;}
                                th {background-color: #f5f5f5; font-weight: bold;}
                                tr:hover {background-color: #f9f9f9;}
                            </style>
                        </head>
                        <body>`;
            
            html += '<h2>Product Inventory</h2>';

            // Handle empty product list
            if (productList.length === 0) {
                html += '<p>No products found in the database.</p>';
            } else {
                html += '<table>';
                // Add table headers (filter out MongoDB's auto-generated fields if needed)
                html += '<tr>';
                Object.keys(productList[0]).forEach(key => {
                    // Skip _id and __v if you don't want them displayed
                    if (key !== '_id' && key !== '__v') {
                        html += `<th>${key.charAt(0).toUpperCase() + key.slice(1)}</th>`;
                    }
                });
                html += '</tr>';

                // Add table rows for each product
                productList.forEach(product => {
                    html += '<tr>';
                    Object.values(product).forEach((value, index) => {
                        // Match the header filter to skip unwanted fields
                        const key = Object.keys(productList[0])[index];
                        if (key !== '_id' && key !== '__v') {
                            html += `<td>${value}</td>`;
                        }
                    });
                    html += '</tr>';
                });
                html += '</table>';
            }

            html += '</body></html>';

            // Set response content type to HTML and send
            res.setHeader('Content-Type', 'text/html');
            res.send(html);
        }
    })
})

Key Notes: #

• We set the Content-Type header to text/html so the browser knows to render it as a webpage, not JSON.
• Added basic CSS to make the table look clean (you can tweak this to match your style needs).
• Included logic to skip MongoDB's auto-generated _id and __v fields—just remove that check if you want to display them.

2. Use a Template Engine (Recommended for Maintainability) #

For larger applications or if you plan to expand the page later, using a template engine like EJS keeps your HTML and JavaScript logic separate, making code easier to maintain.

Step 1: Install EJS #

Run this command in your project directory:

npm install ejs

Step 2: Configure Express to use EJS #

Add these lines to your main Express app file (e.g., app.js):

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

// Set EJS as the view engine
app.set('view engine', 'ejs');
// Specify the folder where your template files live (default is "views")
app.set('views', './views');

Step 3: Update Your Route Handler #

Instead of sending JSON or a string, render an EJS template and pass the product data to it:

userRouter.get('/allProducts', function(req, res) {
    console.log("inside all products")
    productModel.find({}, function(err, productList) {
        if (err) {
            res.send(err);
        } else {
            // Render the "products.ejs" template and pass the product list
            res.render('products', { products: productList });
        }
    })
})

Step 4: Create the EJS Template #

Create a folder named views in your project root, then make a file called products.ejs with this content:

<!DOCTYPE html>
<html>
<head>
    <title>All Products</title>
    <style>
        table {border-collapse: collapse; width: 90%; margin: 30px auto;}
        th {background-color: #4CAF50; color: white; padding: 12px; text-align: left;}
        td {border: 1px solid #ddd; padding: 10px;}
        tr:nth-child(even) {background-color: #f2f2f2;}
        tr:hover {background-color: #ddd;}
        h2 {text-align: center; color: #333;}
    </style>
</head>
<body>
    <h2>Product Inventory</h2>

    <% if (products.length === 0) { %>
        <p style="text-align: center; color: #666;">No products available.</p>
    <% } else { %>
        <table>
            <tr>
                <% Object.keys(products[0]).forEach(key => { 
                    if (key !== '_id' && key !== '__v') { %>
                        <th><%= key.charAt(0).toUpperCase() + key.slice(1) %></th>
                    <% }
                }) %>
            </tr>
            <% products.forEach(product => { %>
                <tr>
                    <% Object.values(product).forEach((value, index) => { 
                        const key = Object.keys(products[0])[index];
                        if (key !== '_id' && key !== '__v') { %>
                            <td><%= value %></td>
                        <% }
                    }) %>
                </tr>
            <% }) %>
        </table>
    <% } %>
</body>
</html>

Why This Is Better: #

• Your HTML is kept in a separate file, so it's easier to edit styles and structure without touching your backend logic.
• EJS uses simple <% %> tags to inject dynamic content, making the code more readable.

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