NodeJS: Dynamically create html from an object

Question

I am working with an API where I get content in form of an object in NodeJS. This object has a title, text and several tables. Now I want to iterate over this object, create HTML out of it and pass it on to my DB. In basic JS I would simply go over the objects element and create the HTML elements one by one with "document.createElement(..)". However, as I found out "document" is not available in NodeJS.

So I was wondering if there is a similar way of doing this? I saw options where I just use string e.g.: var elem = '<div>' + text + '</div>';. However, I was wondering if there are other, prettier options to handle this.

Possible duplicate of: https://stackoverflow.com/questions/21617468/node-js-generate-html — yunzen, Jan 25 '19 at 10:47
@yunzen I saw this post but all the options given in the answers are so extensive for such a small problem. So I was wondering if there is something else or if I really have to use the 'string' option — threxx, Jan 25 '19 at 10:48
lodash has support for templates: https://lodash.com/docs/4.17.11#template — , Jan 25 '19 at 10:53
Why not use [Template Strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)? example: var elem = `
${text}
`; — Aayush Sharma, Jan 25 '19 at 10:55
@AayushSharma I just think it is not the prettiest option but I will use it if there isn't anything else. — threxx, Jan 25 '19 at 10:56
you can also try some templating engines to generate html text. — Aayush Sharma, Jan 25 '19 at 11:09
@AayushSharma do you have a good example for a templating engine? Which would you recommend? — threxx, Jan 25 '19 at 11:10
@threxx what about [Handlebars](https://handlebarsjs.com/)? [this SO answer](https://stackoverflow.com/a/23445611/9971482) should help you to generate string from a template — Aayush Sharma, Jan 25 '19 at 11:23

score 1 · Answer 1 · answered Jan 25 '19 at 11:06

jsdom has the solution

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. In general, the goal of the project is to emulate enough of a subset of a web browser to be useful for testing and scraping real-world web applications.

score 1 · Answer 2 · edited Sep 09 '20 at 08:42

I have a solution for you. With this method I'm ignoring the DB as you have many methods to update/retrieve data from there.

You can use ejs to update the data you render in your "html" file.

It is worth noting at this early point I am also using express to serve my frontend, if you cannot use this for whatever reason this solution won't work for you.

Html is in quotes here because the first step with ejs is to copy your html file and place it in a folder named "views" (This is the folder ejs looks for your files by default) then you rename your file to ".ejs" and add a placeholder wherever you want dynamic data.

For example your "index.html" file becomes "index.ejs" and is now placed a the newly created top level folder "views".

Placeholder looks like this:

<%= YourVariableNameHere &?>

Then in your js file you will need to add this line below after your deceleration of app.express();

app.set('view engine' ,ejs');

Then within your app.get("/", req,res) => {... you want to add the following line:

res.render('index.ejs', {YourVariableNameHere :"Placeholder Default Message"});

This will render your default message when your page first opens. Now within your app.post methods you can re-use the res.render after figuring out what you want to display and use it to update and dynamically change what is shown on the front end.

You could build strings for display or pass string variables into the "Placeholder Default Message". It is also worth noting that html and newlines "\n" can also be passed here but to get it to render correctly in browsers you need to add style="white-space: pre; text-align: center;" either as css or as a tag.

NodeJS: Dynamically create html from an object

2 Answers2

Linked