How to populate a list in HTML with array returned from MongoDB with Nodejs

Question

app.get("/",function(req,res){
  res.sendFile(__dirname+"/test.html");
  Item.find({},{_id:0,item:1},
  function (err, docs) {
    docs.forEach(doc => console.log(doc.item));
  });
});

I want to be able to populate a list in HTML with the items returned in an array from mongoDB. I do not want to use ejs and would like to keep the js code in the js file. Instead of console logging the result, how can I populate the list in HTML? Below is my simple HTML file. I did tried to research the topic but was not able to find a solution, any help is appreciated!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>

    <h1>Test</h1>
    <form action="/" method="post">
      <ul id='list'>
        <li>
      <label for="item">Add your item</label>
      <input type="text" name="item" id="">
      </li>
      <input type="submit">
</ul>
    </form>

    <script src="test.js"></script>

  </body>
</html>

Tauseef Ahmad · Accepted Answer · 2021-02-23 06:10:24Z

1

You should use render function in the res object.

https://expressjs.com/en/api.html#res.render

Instead of creating html files, you'll need to create files with a template engine. Here's a guide to setup express with Handlebars template engine.

https://waelyasmina.medium.com/a-guide-into-using-handlebars-with-your-express-js-application-22b944443b65

answered Feb 23, 2021 at 6:10

Tauseef Ahmad

1269 bronze badges

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

Collectives™ on Stack Overflow

How to populate a list in HTML with array returned from MongoDB with Nodejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related