Fetching data from mongoDB and displaying on HTML

Question

I'm having trouble understanding how to fetch data from the MongoDB database and display it on HTML. I already have set for the data.

this is the the server.js file.

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser')
const mongoose = require('mongoose');
const app = express();


//map global promise - get rid of warning
mongoose.Promise = global.Promise;

// connect to  mongoose
mongoose.connect('mongodb://localhost/peppino-calc', {
  useMongoClient: true
})
.then(() => { console.log('MongoDB connected...')})
.catch(err => console.log(err));

//Load salaryModel
require('./modles/Idea.js');
const Idea = mongoose.model('ideas');


//body parser middleware
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())


// post history page
app.get('/history', (req, res) => {
  Idea.find({})
  .sort({date:'desc'})
  res.sendFile(__dirname + '/js/newJs/history.html')
})

 //process form
 app.post('/ideas', (req, res) => {
   let errors = [];
   if(errors.length > 0) {
     console.log(errors[0]);
   } else {
    const newUser = {
       amount: req.body.totalamount,
       hours: req.body.totalhours,
       salary: req.body.totalsalary,
       tip: req.body.totaltip,
       date: req.body.datetotal
     }
     new Idea(newUser)
     .save()
     .then(idea => {
       res.redirect('/history');
     })
   }
 });

 app.use(express.static(path.join(__dirname, './js/newJs')));
 app.set('port', process.env.PORT || 5700);

 var server = app.listen(app.get('port'), function() {
   console.log('listening on port ', server.address().port);
 });

my goal is to display the data from the database in a specific html page. any help?

Uhm, what is the problem?

Markus W Mahlberg
– Markus W Mahlberg

2018-01-08 12:55:02 +00:00
Commented Jan 8, 2018 at 12:55 — Markus W Mahlberg
– Markus W Mahlberg, Commented Jan 8, 2018 at 12:55

YouneL · Accepted Answer · 2018-01-08 14:10:31Z

You have to use a template engine in order to display data in an html page, there are many template engines, you can choose one from this link

Here is an example using pug:

1- install pug

npm install pug --save

2- set view directory:

app.set('views', path.join(__dirname, 'views'));

3- set pug as the default view engine

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

4- create history.pug inside views folder

doctype html
html
    head
    body
        table
            thead
                tr
                    th Name
                    th date
            tbody
                each idea in ideas
                    tr
                        td= idea.name
                        td= idea.date

5- pass data from express to pug:

app.get('/history', (req, res) => {
    let ideas = Idea.find({})
    .sort({date:'desc'}).exec( (err, ideas) => {
        res.render('history', ideas);
    });
})

Collectives™ on Stack Overflow

Fetching data from mongoDB and displaying on HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related