How to display database content to EJS Web Pages?

Question

So I have a JavaScript page with the following code: Story.js:

var express = require('express');
var dbcon = require('./app/db/databaseconnection');

var app = express();
var router = express.Router();
dbcon.createTable();
var filepath = __dirname + '/views/';
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.use('/', router);

var results = dbcon.getProducts().then(results => {
     return results;
 }).catch(err => { console.log(err) })

router.get('/', (request, response) => response.render(filepath + 'index', { page_name: 'home' }));
router.get('/store', (request, response) => response.render(filepath + 'store', { page_name: 'store', products: results }));
router.get('/about', (request, response) => response.render(filepath + 'about', { page_name: 'about' }));
router.get('/contact', (request, response) => response.render(filepath + 'contact', { page_name: 'contact' }));
router.get('/build', (request, response) => response.render(filepath + 'build/build'));
router.get('/learn', (request, response) => response.render(filepath + 'learn/learn'));
app.use('*', (request, response) => response.render(filepath + '404', { page_name: '404' }));
app.listen(3000, () => console.log("Server running at Port 3000"));

I also have a JavaScript page with my database content: Databaseconnection.js:

const mysql = require("mysql");

const pool = mysql.createPool({
  connectionLimit: 10, 
  host: "localhost",
  user: "root",
  password: "LOTOS123l",
  database: "dbComputerStore"
});

module.exports = {
  getProducts: () => new Promise((resolve, reject) => {
    pool.query("SELECT * FROM products", (error, results, fields) => {
      if (error) {
        reject(error);
      } else {
        resolve(results);
      }
    });
  }),
  createTable: () => new Promise((resolve, reject) => {
    PRIMARY KEY NOT NULL, image LONGBLOB NOT NULL)", (error, results, fields) => {
      pool.query("SELECT * FROM pimages", (error, results, fields) => {
      if (error) {
        reject(error);
      } else {
        resolve(results);
        console.log(results);
      }
    });
  }),
  populatetable: () => new Promise((resolve, reject) => {
    pool.query();
  })
};

Then I have my ejs page which I am trying to display to: store.ejs

<!DOCTYPE html>
<html>

<head>
    <title>PC Store | Store</title>
    <% include partials/header %>
</head>

<body>
    <header>
        <% include partials/navbar %>
    </header>
    <main>
        <div class="container">
        <% console.log(products); %>
        </div>
    </main>
    <footer>
        <% include partials/footer %>
    </footer>
</body>

</html>

Currently, I have it set to console.log because I am trying to see if the information is passing at all. However, it is not, it says Promise Resolved. So how would I display my db content to the ejs page. I am trying to make an online store and I was wondering how I would do that. Any help is appreciated!

With some help, I was able to get the database content to store.js, but I am still not able to get the content from the store.js to the store.ejs page.

score 0 · Accepted Answer · answered Jul 31 '18 at 22:01

0

Your passing a promise to EJS for rendering, you need to pass the value. Alter your render function to resolve the product promise and forward the result to EJS. For instance:

router.get('/store', (request, response) => {
    return productPromise.then(results => {
        return response.render(filepath + 'store', { page_name: 'store', products: results });
    });
});

Alternativly get the products from the db on every request:

router.get('/store', (request, response) => {
    return dbcon.getProducts().then(results => {
        return response.render(filepath + 'store', { page_name: 'store', products: results });
    });
});

answered Jul 31 '18 at 22:01

ug_

11,267
2
35
52

Hey, one more thing, How would I display it on an ejs page? I've been using console.log to make sure everything is working, but How would I display the content on the ejs? – Roman Roshchuk Jul 31 '18 at 23:37
@RomanRoshchuk Thats a question for how to use EJS with data. You probably have an array or object. A post like this one should address those questions. https://stackoverflow.com/questions/38179077/what-is-the-proper-way-to-loop-through-an-array-in-an-ejs-template-after-an-ajax – ug_ Aug 01 '18 at 00:52

How to display database content to EJS Web Pages?

1 Answers1