How to build a dynamic html table from json data using node js?

Question

There is a small project at nodejs + express + postgres for self-education. By requesting Postgres I get data in json format, then the data on the express tools is rendered to the ejs template. The very question is how do I add this json to a dynamic table in html.

The request to the database looks like this

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

    })
 });

The data itself looks like this (about 30 values).

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

Emilio Grisolía · Accepted Answer · 2020-07-12 03:09:03Z

A little too late maybe, but the solutions I found didn't work quite well. I needed something simpler, not a template engine or a lib. Also, the mentioned npm package, html-tablify, didnt work for me when trying to generate a table from a Mongoose response. Btw, sorry for my bad english.

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)

Output:

<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>

How does it works... it is actually pretty simple. The row function wraps some value inside a tag. heading, on the other side, takes an object and creates the table heading html based on the object's own keys. datarow, takes an object, and genereate all the cells of the row Both heading and datarow functions returns a row html code by using the row function. htmlTable function receives a list of objects, and just returns the full table's html code.

With a few tweaks, markup formatting, attributes and styles can be easily added.

Senthil · Accepted Answer · 2018-07-05 10:22:01Z

0

Ref: 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);

answered Jul 5, 2018 at 10:22

Senthil

2,2441 gold badge15 silver badges21 bronze badges

2 Comments

Aldem Over a year ago

Thank you for your answer, but in my cases when using this example, I get this result: id info_init info_final state 12293245 [object Object] [object Object] 1 12291387 [object Object] [object Object] 1

Senthil Over a year ago

Ref: i created a example embed.plnkr.co/apjw1FF4Qu3yc1B3bSb6 because your object has some nested data inside the key "info_init"

Osman Goni Nahid · Accepted Answer · 2018-07-05 10:21:28Z

0

It's not about NodeJS related question, you can look into html table how to make table in html. Then render dynamic contents by nodejs better is use a view engine like ejs.

answered Jul 5, 2018 at 10:21

Osman Goni Nahid

1,2992 gold badges16 silver badges24 bronze badges

7 Comments

Aldem Over a year ago

Can you tell me how to bring out the contents of all "info_init".

Osman Goni Nahid Over a year ago

info_init means ?

Aldem Over a year ago

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

Aldem Over a year ago

That is, fill the table with content only "info_init"

Osman Goni Nahid Over a year ago

Do u use any temple engine

|

toyeca · Accepted Answer · 2020-02-23 11:04:09Z

0

Use html-tablify

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

I will create html table from json

answered Feb 23, 2020 at 11:04

toyeca

1792 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to build a dynamic html table from json data using node js?

4 Answers 4

Comments

2 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related