如何使用节点 js 从 json 数据构建动态 html 表？

Question

在nodejs + express + postgres有一个小项目，用于自学。通过请求 Postgres，我获取 json 格式的数据，然后将 express 工具上的数据呈现到 ejs 模板。问题是如何将此 json 添加到 html 中的动态表中。

对数据库的请求如下所示

    const pool = new pg.Pool(config);

 router.get('/index', (req, res, next) => {
    pool.connect(function (err, client, done) {
        if (err) {
            console.log("Can not connect to the DB" + err);
        }
        client.query('SELECT * FROM srt_final WHERE info_init @> \'{"subscriber":"999999"}\' ORDER BY id DESC LIMIT 20', function (err, result) {
             done();
             if (err) {
                 console.log(err);
                 res.status(400).send(err);
             }
             var osaka = result.rows;

                     res.render('index', {  srt: osaka });
        })

    })
 });

数据本身看起来像这样（大约 30 个值）。

    [
{"id":11653167,"info_init":
  {"date":"05.07.2018"},
   ....
  {"Time":"10:31:17"}
},
  ....
{"id":11653168,"info_init":
  {:},
    ......
  {:}
}
]

Answer 1

也许有点太晚了，但我找到的解决方案效果不佳。我需要更简单的东西，而不是模板引擎或库。此外，在尝试从 Mongoose 响应生成表时，提到的 npm 包 html-tablify 对我不起作用。顺便说一句，对不起我的英语不好。

const row = html => `<tr>\n${html}</tr>\n`,
      heading = object => row(Object.keys(object).reduce((html, heading) => (html + `<th>${heading}</th>`), '')),
      datarow = object => row(Object.values(object).reduce((html, value) => (html + `<td>${value}</td>`), ''));
                               
function htmlTable(dataList) {
  return `<table>
            ${heading(dataList[0])}
            ${dataList.reduce((html, object) => (html + datarow(object)), '')}
          </table>`
}

const set = [
  {_id: 1234,
    usuario: 'user1',
    clave: 'pass1' },
  {_id: 12345,
    usuario: 'user2',
    clave: 'asdas' },
  {_id: 12357,
    usuario: 'user3',
    clave: 'asdasd' },
  {_id: 12376,
    usuario: 'user5',
    clave: 'asdasd' }
];

htmlTable(set)

输出：

<table>
  <tr>
    <th>_id</th>
    <th>usuario</th>
    <th>clave</th>
  </tr>   
  <tr>
     <td>123</td>
     <td>xD</td>
     <td>asd</td>
  </tr>
  <tr>
     <td>123</td>
     <td>xD</td>
     <td>asd</td>
  </tr>
  <tr>
     <td>123</td>
     <td>xD</td>
     <td>asd</td>
  </tr>
  <tr>
     <td>123</td>
     <td>xD</td>
     <td>asd</td>
  </tr>
</table>

它是如何工作的......它实际上非常简单。 row 函数将一些值包装在标签内。 另一方面，heading 获取一个对象并根据对象自己的键创建表标题 html。 datarow，取一个对象，生成该行的所有单元格 标题和数据行函数都使用行函数返回行 html 代码。 htmlTable 函数接收对象列表，并返回完整表的 html 代码。

通过一些调整，可以轻松添加标记格式、属性和样式。

Answer 2

使用 html-tablify

https://www.npmjs.com/package/html-tablify

我将从 json 创建 html 表

Answer 3

参考：How to create HTML table based on JSON

 var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);

Answer 4

这不是NodeJS相关的问题，您可以查看html table如何在html中制作表格。然后通过nodejs更好地渲染动态内容是使用像ejs这样的视图引擎。