I am trying to create a html table using node.js. I will send JSON data from the server to the HTML page. Then I am thinking of turning this JSON into a table but I couldn't run any of the methods on the internet.

My problems are exactly like these:

1- My table contains various css classes. How do I add these classes to the table I will create with Javascript?

2- I want to use template engines like PUG, EJS but only for the table. Can I embed PUG or EJS code inside the normal html page?

In short, what is the easiest way to dynamically create a table for node.js? (without losing the css design)

I am trying to create a html table using node.js. I will send JSON data from the server to the HTML page. Then I am thinking of turning this JSON into a table but I couldn't run any of the methods on the internet.

My problems are exactly like these:

1- My table contains various css classes. How do I add these classes to the table I will create with Javascript?

2- I want to use template engines like PUG, EJS but only for the table. Can I embed PUG or EJS code inside the normal html page?

In short, what is the easiest way to dynamically create a table for node.js? (without losing the css design)

• javascript
• html
• node.js
• pug
• ejs

Share Improve this question Follow asked Jan 21, 2020 at 20:09 Pehr SibusisoPehr Sibusiso 91222 gold badges1717 silver badges3232 bronze badges 2

• is jquery an option? nodejs is serverside, you can't just "create" html pages with it. Get the JSON through AJAX and dynamically create a table. – Sam Leurs Commented Jan 21, 2020 at 20:13
• I think this would be the best if I make the table part of the HTML page with PUG or EJS. but if not, i would like to see your answer. Can you share an example with me? – Pehr Sibusiso Commented Jan 21, 2020 at 20:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

As your question is very generic, I am assuming some things & providing a solution

Let's say you get json array from server as below

[
 {
  name:'John',
  surname:'Doe',
  age:25
 },
 {
  name:'Jane',
  surname:'War',
  age:21
 },
 {
  name:'Shane',
  surname:'Meyer',
  age:22
 }
]

You have HTML as below

<table id="my_table">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
  </tr>
</table>

Write javascript as below to add rows inside table

forEach(let row in array) {
  $('#my_table').append(`<tr>
        <td>${row.name}</td>
        <td>${row.surname}</td>
        <td>${row.age}</td>
    </tr>`);
}