John D. John D. - 2 months ago 23
React JSX Question

How to display data stored in mySQL by node.js on ejs file :: Javascript

so.. I've been trying to get the data stored in mySQL server to show up on the webpage created with ejs file, and haven't been successful yet..
I have looked up online and haven't had any luck so far..
here's what I have so far..

page.ejs

<%- include('partials/core/pageBeginning',{
page: 'pageName',
styles: ['pageStyle'],
title:'someTitle',
});
-%>
<header class="className">
<div id="myDivID">
<div class="body">
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h1 class="myHeading">
SOME TEXT
</h1>
</div>
</div>
<div class="container">
<a class = "someName" href="">
<%# Trying to put data here-%>
<% data.forEach(function(dat) {%>
<img src=<%=JSON.stringify(dat) %> />
<% }); %>
</a>
</div>
</div>
</div>
</header>

<%-
include('partials/core/pageEnding',{scripts:['page.mount',]});
-%>


Model.js

'use strict';
const db = require('db');
const {Type} = db;
const table = db.defineTable('aList', {
columns: {
id:Type.bigint().unsigned().notNull().primaryKey().autoIncrement(),
name: Type.varchar(127).notNull().unique(),
logo: Type.varchar(127).notNull().unique(),
min:Type.tinyint().unsigned().notNull(),
max:Type.tinyint().unsigned().default(50),
},
indexes: [ 'name' ],
});

const ATable = {
create(aData, cb) {
table.insert({
name: aData.name,
logo: aData.logo,
min: aData.min,
max: aData.max,
},(err, result) =>{
if(err) {
cb(err);
return;
}
cb(null, result.insertId);
});
},
getLogo(cb){
table.query(
'SELECT `logo` ' +
'FROM `aList`',
cb);
},
getAll(cb){
table.query(
'SELECT `*` ' +
'FROM `aList`',
cb);
},
};
module.exports = ATable;


Controller.js

'use strict';

const ATable = require('../ATable');
const jsonBodyParser = require('../jsonBodyParser');
const logger = require('logger');
const router = require('../router');

router.post('/aList/create', jsonBodyParser, (req, res) => {
const aData = req.body;

ATable.create(aData, err =>{
if(err){
logger.error(err);
res.sendStatus(500);
return;
}

res.sendStatus(201);
});
});

router.get('/aList/logo', (req, res, next) => {
ATable.getLogo((err, logo) => {
if (err) {
next (err);
return;
}
res.json(logo);
});
});

router.get('/aList', (req, res, next) => {
aTable.getAll((err, things) =>{
if (err) {
next (err);
return;
}
res.json(things);
});
});


when I try going on a browser like localhost:port_number/api/aList/logo, I can see the data fine but I can't seem to get it to show up on my page itself.. any help is appreciated!
Thank yous in advance!

Answer

May be a little wrong. But ejs returns HTML from Template + data.. You have template. By you dont return data to it. You just return JSON to page...which would be OK if you using AJAX or something similar. In your case you need some thing like this

router.get('/aList/logo', (req, res, next) => { ATable.getLogo((err, logo) => { if (err) { next (err); return; } //in here you need to render data in reder for EJS template to process it. res.render('page.ejs', {data: logo}); }); });

Here is the docs http://www.embeddedjs.com/getting_started.html

Hope this helps.

Comments