使用 Node.js 和 Express 将 JSON 数据集显示为表格

Posted 2023-02-24

【中文标题】使用 Node.js 和 Express 将 JSON 数据集显示为表格

【英文标题】：Displaying a JSON dataset as a table with Node.js and Express

【发布时间】：2016-04-20 23:34:40

【问题描述】：

首先，我想指出我对 Node.JS 非常陌生。我正在尝试使用 NodeJS 制作一个包含多个表格和信息的页面。我的问题是，我无法将 SQL 查询的结果放入 html 表中。目前我使用 express 将.send 的数据转换为 HTML 页面。

我使用的代码：

    var http = require('http');
    http.createServer(function(req, res) );
      var mysql = require("mysql"); 
      var express = require('express');
      var app = express();
      console.log('Creating the http server');
      con.query('SELECT id ,name FROM customer', function(err, rows, fields)
    
        console.log('Connection result error '+err);
        console.log('num of records is '+rows.length);

        app.get('/', function (req, res) 
          res.send(rows);
        );

    );

    app.listen(3002, function () 
      console.log('Example app listening on port 3000!');
    )

这会在我的 HTML 页面上打印我的 sql 语句中的所有数据：

"id":"1","name":"Robert"
"id":"2","name":"John"
"id":"3","name":"Jack"
"id":"4","name":"Will"

我想要的结果是：

id              Name
1               Robert
2               John
3               Jack
4               Will
..etc 

这甚至可以在 Node JS 中实现吗？

【问题讨论】：

我正在尝试创建一个表。对错误的建议深表歉意。

所以您想在 HTML 表格中显示结果集？ （在数据库术语中，创建表是另一回事）

我想在我的 HTML 页面中创建一个表格，而不是在我的数据库中

有多种方法，您可以将其呈现为服务器端的表格，也可以从客户端获取 JSON，循环遍历并在那里制作表格，您更喜欢哪一个？

我认为对我来说最好的方法是使用 JSON

【参考方案1】：

我建议您查看Jade。它是一个 node js 的模板引擎，可用于创建 html 页面。它易于使用且非常灵活。

找到了一个很好的教程here。它向您展示了如何使用 Node、Express 和 Jade 创建一个简单的网站，我认为这是一个很好的起点。

为了解决您的 Jade 问题，*** 中有几个答案，例如 here。

【讨论】：

感谢您提供的提示，我确实查看了 Jade 并设法将模板放在一起，但我仍然不知道如何在我的页面中获取表格。我在哪里放置表格的代码？ （布局或索引）

如果您的问题是指我推荐的教程，我会将代码放在索引中（但这并不重要）。稍后教程在 app.get(...) 部分解释 res.render(...) 用于在客户端显示您的布局。该教程非常好，因此请逐步进行并确保您对正在发生的事情有所了解。 Jade 一开始可能会让人困惑，但只要稍微玩一下，看看会发生什么

【参考方案2】：

类似于 Jade 你可以使用Embedded JS

<table>
  <tr>
    <th>id</th><th>Name</th>
  </tr>

  <% for (var i = 0; i < data.length; i++)  %>
    <tr>
      <td><%= data[i].id %></td>
      <td><%= data[i].name %></td>
    </tr>    
  <%  %>
</table>

这将遍历一个对象数组（我已将其保存为 data 并基于此填充一个表。