Passing in data from mongodb to html table using nodejs

Question

I've got a problem in showing data from mongodb into a table in html table, i can run it and see the data as an array but i want to put them in the table, i would be pleased if anyone can help or guid me.

Answer 1

Nasim Nozarpourshami mmhh...

what do you mean by "tb is a page that I've created a table there"?

do you have a file named "tb" wich contain an empty html table with the style you would like to use?

if so, I don't think that's the good way (except if it is a template ready to dynamically build a page by sending it with data through a templating language)... but you should share also that model (if the style matter).

anyway, here is a nodejs code playground project with a copy of your code:

https://code.sololearn.com/cu8iHWMZ6I9Y/?ref=app

you should rather share this kind of link than posting directly the code in a post: that's most readable, not length limited, and ready to eventually run it when it's possible (so easiest debuggable) ;)

if you have to share your html/css/js code, you could use a web code playground project, as I have shared your nodejs one ^^

Answer 2

however, sorry, but I don't think I could help further: your code seems to send a json ajax response... I was expecting it would build dynamically an html page...

... but there is another alternative: with the array received through ajax in your client side html page, you could dynamically build and append (or populate) the table inside the page ;)

feel free to share your other related pieces of codes, so me or others could help/guide you further :)

Answer 3

iterate the array and generate the html code to embed your data in the table cells elements ^^

Answer 4

I'm very few aware of js as server side, but I'm quite well experimented at js on client side: you may share your code... it may be enough to be helped/guided further ;)

BUT REMOVE/HIDDE/REPLACE SENSITIVE/PRIVATE INFORMATIONS FROM IT (SUCH AS DB PASSWORD...)

Answer 5

Thanks for your help, I'm new too
this is my js code
var express=require("express");
var path=require('path');
var app =express();
var bodyParser = require('body-parser');
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:/";

app.use(express.static('./public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
app.post('/login',function(req,res){
var x=req.body.x;
var y=req.body.y;
var data={

"x_op":x,
"y_op":y
}
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("mydb");
var myobj = { x: `${x}`, y: `${y}`};
dbo.collection("customers").insertOne(myobj, function(err, res) {
if (err) throw err;
console.log("1 document inserted");
db.close();
});
});

res.set({
'Access-Control-Allow-Origin' : '*'
});

res.send(JSON.stringify(data));

});
app.get('/tb',function(req,res){
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("mydb");

dbo.collection("customers").find({}).toArray(function(err, result) {
if (err) throw err;
var obj = '$(result)';
for (var i = 0; i < obj.length; i++){
app.locals.obj=result;
db.close();
}

});
});
});
tb is a page that I've created a table there and i want to show data in mongo there.

Answer 6

what is "ejs"?

vanilla javascript still has all that is needed... frameworks only add a layer of eventually simplicity against another tool to learn ^^

from js you could decode your json string (to get a "real" array of your data from it), and iterate to either build an html string of the table code (in wich you insert your data as cell content) and assign it to the parent element (selected from DOM) through its innerHTML property (the simpler would be to use document.body as parent), or use the createElement(): one time for a parent 'table' one, then once for each row ('tr') wich must be appended to the previous created 'table', and once for each cell ('td') of each rows wich must be appended to their related rows...

once the loop is ended, your table structure is ready to be appended to the parent of your choice in the page (and so will be displayed by the browser).

Answer 7

This is an attempt to generate the HTML code with JS.
https://code.sololearn.com/cw527BsT6wt7/

Although I agree it is simpler and more readable with EJS. Generally, I prefer template engines to this manual method.

Do what you think is best for your project. 😉

Answer 8

Thank you so much for your help and guiding me, so what is the other way to show data? If i don't use the other html page.
Thank you

Answer 9

I assumed that you know javascript for web browsers (client side)... didn't you use it to make an ajax call (XML HTTP Request) to get the data array from your server?

Answer 10

Actually I'm a new learner, no I didn't use ajax, I used console.log to show them in terminal, but I want to show them in a table in the browser

Answer 11

console.log works in browser environment... how did you retrieve the array from there?

Answer 12

I used both
Console.log(result)
Res.send(result)
With the second on, it shows the data as a single array, but I want to show them like a table.

Answer 13

Did you only run your nodejs code to view the array?

I'm afraid I'm not enough aware of how nodejs works... you must wait for another one able to help you further: I would be able to help if you only need to either build dynamically the html page with the table containing your data to be send to browser or build dynamically the table from the page in the browser itself by receiving the json data as your code seems to do (the "Res.send(result)" command)^^

Answer 14

Yes I've run it with res.send and console, so if I want to build dynamically the table from the page in the browser itself by receiving the json, would you please tell me how to do it? Should i use ejs?

Answer 15

Thank you for taking the trouble to help me.I do appreciate it.
I've done it finally, the data will be shown in a table in another html file, here is my code
https://code.sololearn.com/cB1A31bOnuBy/?ref=app

Answer 16

Ejs is a simple templating language, it helps to manage files and code better.

Answer 17

Thanks for your answer