How can I pass content to an element in clients html page?

Question

I'm currently using Node.js to serve a webpage that takes in user inputs which are stored on a mongodb server. The web page also displays specified or all user inputs entered. I'm trying to figure how to pass the user inputs from node.js to the <p> element.

In my node.js file I am responding with the user data as a string like so:

response.writeHead(200, {"Content-Type": "text/plain"});
response.write(stringifyMongoDBCollection(user_data_collection));
response.end();

When I do this, this re-directs the client to display the content as text/plain which I expected. The next step is to update just the content of <p>. How can I do this? I thought about re-serving the entire html content with the new populated <p> but that would make all current user inputs disappear...

The user data would be a mongodb collection array and look like this:

 [ { _id: 5dda17065f7e9b64282e7291,
    date: 'Sat Nov 23 2019 21:37:10 GMT-0800 (Pacific Standard Time)',
    field: '127' },
  { _id: 5dda18ecf330d521a035c444,
    date: 'Sat Nov 23 2019 21:45:16 GMT-0800 (Pacific Standard Time)',
    field: 125},
  { _id: 5dda1951f330d521a035c445,
    date: 'Sat Nov 23 2019 21:46:57 GMT-0800 (Pacific Standard Time)',
    field: '111' } ]

Can you share the sample data from this method *stringifyMongoDBCollection(user_data_collection)* — hbamithkumara, Nov 24 '19 at 09:31
You need to make an Ajax request to the endpoint. There are plenty of questions on them. — Adrian, Nov 25 '19 at 07:49
Does this answer your question? [How to make an AJAX call without jQuery?](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Adrian, Nov 25 '19 at 07:49

score 2 · Accepted Answer · answered Nov 25 '19 at 09:00

You could do something like this.

In Node section

res.status(200).send(stringifyMongoDBCollection(user_data_collection));

Client side

function getContent() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos",
    success: function (res) {
      if (res) {
        res = res.slice(0, 5); // limiting data to 5
        var val = '';
        res.forEach(todo => {
          val += '<p><b>Title:</b>' + todo.title + '  <b>Completed:</b> ' + todo.completed + '</p>';
        });
      }
      $("#content").html(val);
    },
    error: function () {
      var val = '<p>Error in loading content</p>'
      $("#content").html(val);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="getContent()">Get Content</button>

<h1>Todo</h1>
<div id="content"></div>

References

jQuery ajax() Method

Node.js - Response Object

AJAX Introduction

Thanks for that, that did the trick. I did have to make some small changes. I didn't use `res.status(200)...` since that is node.js express syntax. I ended up using `response.writeHead(200, {"Content-Type": "text/plain"}); response.write(stringifyMongoDBCollection(user_data_collection)); response.end();`. Also inside `function(res)` on the client side, I had `$("#content").html(res);` — tyleax, Nov 26 '19 at 05:11

How can I pass content to an element in clients html page?

1 Answers1