Question

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

对数据库的请求如下

RcppArmadillo::RcppArmadillo.package.skeleton()

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

    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 });
        })

    })
 });

Answer 1

与NodeJS相关的问题无关，您可以查看html表中如何在html中创建表。然后使用诸如ejs之类的视图引擎，更好地通过nodejs呈现动态内容。

Answer 2

参考：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 3

使用html-tablify

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

我将从json创建html表

Answer 4

也许为时已晚，但是我发现的解决方案效果不佳。我需要更简单的东西，而不是模板引擎或库。另外，当尝试从猫鼬响应生成表时，提到的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代码。

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

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

4 个答案: