Can we send data from mongoDB to HTML? - html

Question

I am working on a Mini Project where I have stored data coming from a form in my DataBase(MongoDB). Now I want to fetch data from MongoDB and want to add it to HTML(as a list) to display on the webpage.
I wanted to do this without using ejs or any other tool. Is this possible? If yes,then how?
(I have used Expressjs to create the server)

Answer 1

You would have to javascript in order to manipulate DOM elements on the page.
(see. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)

Answer 2

You can fetch the data in your html then add it to your page by manipulating the dom.
This is might help you:
<script type='text/javascript'>
$(function(){
$.ajax({
url: 'http://localhost:28017/local/students',
type: 'get',
dataType: 'jsonp',
jsonp: 'jsonp',
success: function (data) {
console.log('success', data);
}
}).done(function(){
let output = '<div>'
$.each(data, function(key, data){
output += '<p>' + data.score + '</p>';
});
output += '</div>'
$('#list').html(output);
});
});
</script>
Also this response might be helpful:
REST AJAX request to mongoDB

Answer 3

Since you have mentioned you are using Expressjs, I believe you are also using an ODM like mongoose. Hence, you should create an api in your backend that fetches the data from MongoDB (see your ODM's documentation for it) and send request to that api from your front end, whose response should trigger DOM manipulation.
Here are some resources that might help you:
https://medium.com/swlh/how-to-build-simple-restful-api-with-nodejs-expressjs-and-mongodb-e59595091640
https://medium.com/#ingridf/flow-of-fetch-and-dom-manipulation-454af047b6c
https://developer.mozilla.org/en-US/docs/Learn