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

Question

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

...
            <div class="container" id="someID">
                <a class = "someName" href="">
                    <%# Trying to put data here-%>
                    <% data.forEach(function(dat) {%>
                        <img src=<%=JSON.stringify(dat) %> />
                    <% }); %>
                </a>
            </div>
...

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(),
    },
    indexes: [ 'name' ],
});

const ATable = {
    create(aData, cb) {
        table.insert({
            name: aData.name,
            logo: aData.logo,
        },(err, result) =>{
            if(err) {
                cb(err);
                return;
            }
            cb(null, result.insertId);
        });
    },
    getLogo(cb){
        table.query(
            'SELECT `logo` ' +
            '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);
        res.render('page',{data:logo});
    });
});

page.mount.js

var React = require('react');
var ReactDOM = require('ReactDOM');
var Container = require('page.react');

ReactDOM.render(<Container />, document.getElementById('someID'));

page.react.js

'use strict'

var Container = React.createClass({
    getInitialState: function(){
     return {
        title: 'SOME TEXT',
        sources:[]
      }
    },
    render: function(){
      return (
        <div>
          <h1> {this.state.title} </h1>
          <ShowList names={this.state.sources} />
        </div>
      )
    }
});

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(source){
      return <a class="list" href="http://www.google.ca"> <img class="logos" src={source} /> </a>;
});
    return (
        <div>
            {listItems}
        </div>
    )
  }
});

module.exports = Container;

when I access localhost:port_number/api/aList/logo, I can see the data fine but when I try go on the page, it gives me an error saying data not defined.. any help is appreciated! Thank yous in advance!

Answer 1

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.