Dynamically create an HTML table in Express.js

Question

I'm new to Node.js/Express.js and I've been reading a lot, but I confess that perhaps I'm still to stick into the PHP paradigm. I'm thinking to shift my site's server from PHP to Express.js, but there are certain issues that I still cannot figure out.

For example in PHP, if I wanted to dynamically build an enormous HTML table from an Object or Array I would simply do something like:

<table>
  <?php foreach ($my_array as $key => $value) { 
    echo "<tr><td>".$key."</td><td>".$value."</td></tr>";
  }?>
</table>

How would I do that in Express.js with or without Jade?

You have multiple options from handlebarsjs.com reactjs.org vuejs.org and many more — asosnovsky
– asosnovsky, Commented Dec 19, 2017 at 19:16
Express on its own does not have a way to do it, you need to either integrate a template processing framework like handlebarsjs.com or shift how you think of the application be adding a client-side view-layer like reactjs.org or vuejs.org. I think you go for handlebars, as it would be closer to how you use to work in php (with slight different syntax) — asosnovsky
– asosnovsky, Commented Dec 19, 2017 at 19:26
@asosnovsky Could you kindly provide here an example with handlebarsjs and I'd set your answer as the solution? Thank you in advance — João Pimentel Ferreira
– João Pimentel Ferreira, Commented Dec 19, 2017 at 20:48
someone made a downvote. Reasons should be provided according to guidelines — João Pimentel Ferreira
– João Pimentel Ferreira, Commented Dec 20, 2017 at 0:05

TGrif · Accepted Answer · 2017-12-19 21:35:26Z

4

Sure you can do the same thing with express:

app.get('/', (req, res) => {

  let obj = { 1: 'one', 2: 'two', 3: 'three' }

  let result = '<table>';
  for (let el in obj) {
    result += "<tr><td>" + el + "</td><td>" + obj[el] + "</td></tr>";
  }
  result += '</table>';

  res.send(result);

})

But it's a good idea to decouple data from view with the use of a template engine like jade:

index.pug:

table
  each value, key in data
    tr
      td #{key}
      td #{value}

server.js:

app.get('/', (req, res) => {
  let obj = { 1: 'one', 2: 'two', 3: 'three' }
  res.render('index', { data: obj })
})

edited Dec 19, 2017 at 21:35

answered Dec 19, 2017 at 20:52

TGrif

5,9709 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

João Pimentel Ferreira Over a year ago

Very interesting indeed. Thus in jade the expression each value, key in data fills HTML to the browser according to the data object which you sent in server.js

João Pimentel Ferreira Over a year ago

What I mean is that I thought it was impossible to make a 'static' view model be filled immensely with data from an object. Thus it's very similar when jQuery fills 'static' html. Thanks :)

TGrif Over a year ago

Sure, and you can use any template engine that suits you, like handlebars as suggested by asosnovsky in his comment.

Collectives™ on Stack Overflow

Dynamically create an HTML table in Express.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related