Search code examples
javascriptnode.jsreferenceerror

ReferenceError: 'pictures' is not defined. Using Node JS


Searched all over the place but can't get it running. I'm new here, so kinda hard for me also to search or fix the right thing.. Trying to fetch data from the database, but the pictures variable is not defined it says, I got it running before, maybe just a type error of something like that, but I tried already lots of things and i'm running out of time for my school project. This is my code:

index.ejs:

<main>
    <div class="jumbotron">
        <h1>Formula 1, see it, feel it!</h1></br>
        <p>Welkom! Op deze site vind u de meest mooie foto's van de Formule 1.</p>
    </div>
</main>

<div class="jumbotron">

       <% if(pictures.length){ %>     
<table>
    <tr>
        <th>Titel</th>
        <th>Locatie</th>
        <th>Datum</th>
        <th>Naam</th>
        <th>Waardering</th>

    </tr>
        <% } %>
        <% for (var i = 0; i < pictures.length; i++) { %>
    <tr>

        <td><%= pictures[i].titel %></td>
        <td><%= pictures[i].locatie %></td>
        <td><%= pictures[i].datum %></td>
        <td><%= pictures[i].naam %></td>
        <td><%= pictures[i].waardering %></td>
        <% } %>
    </tr>                   
</table>    

</div>

<footer>
    <% include ../partials/footer %>
</footer>

index.js

    var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
    req.getConnection(function(err, connection) {
        connection.query('SELECT * FROM pictures', function(err, results) {
            res.locals.pictures = results;
            console.log(results);
            res.render('../views/pages/index');
        });
    });
});

module.exports = router;

app.js:

var express = require('express'),
    path = require('path'),
    favicon = require('serve-favicon'),
    logger = require('morgan'),
    cookieParser = require('cookie-parser'),
    flash = require('connect-flash'),
    expressValidator = require('express-validator'),
    session = require('express-session'),
    passport = require('passport'),
    LocalStrategy = require('passport-local').Strategy,
    bodyParser = require('body-parser'),
    multer = require('multer'),
    mongo = require('mongodb'),
    mongoose = require('mongoose'),
    mysql = require('mysql'),
    myConnection = require('express-myconnection');

var db = mongoose.connection;

var dbOptions = {
    host: 'localhost',
    user: 'fcdeen_user',
    password: 'wEvGT9ctm8KUxdTD',
    database: 'fcdeen'
};

var indexRoutes = require('./routes/index'),    
    loginRoutes = require('./routes/login'),
    uploadRoutes = require('./routes/upload');

var app = express();

//Use session
app.use(session({
  secret: "Its_A_veRy_DarK_SecreT",
  resave: false,
  saveUninitialized: true
}));

// Voeg de bodyparser middleware aan de app toe (POST requests)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// set the view engine to ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// Voeg connectie middleware toe aan app
app.use(myConnection(mysql, dbOptions, 'single'));

// index page 
app.get('/home', function(req, res) {
    res.render('pages/index');
});

// index page 
app.get('/index', function(req, res) {
    res.render('pages/index');
});

// upload page 
app.get('/upload', function(req, res) {
    res.render('pages/upload');
});

// login page 
app.get('/login', function(req, res) {
    res.render('pages/login');
});

app.listen(8080);
console.log('Launch at port 8080');

And this is the error:

ReferenceError: C:\School\SSS 2015\testen\node-ejs-master\views\pages\index.ejs:21
   19| <div class="jumbotron">
   20|   
>> 21|   <% if(pictures.length){ %>     
   22| <table>
   23| <tr>
   24| <th>Titel</th>

pictures is not defined
   at eval (eval at <anonymous> (C:\School\SSS 2015\testen\node-ejs-master\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:33:292)
   at eval (eval at <anonymous> (C:\School\SSS 2015\testen\node-ejs-master\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:35:68)
   at C:\School\SSS 2015\testen\node-ejs-master\node_modules\ejs\lib\ejs.js:255:15
   at Object.exports.render (C:\School\SSS 2015\testen\node-ejs-master\node_modules\ejs\lib\ejs.js:293:13)
   at View.exports.renderFile [as engine] (C:\School\SSS 2015\testen\node-ejs-master\node_modules\ejs\lib\ejs.js:323:20)
   at View.render (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\view.js:126:8)
   at tryRender (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\application.js:639:10)
   at EventEmitter.render (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\application.js:591:3)
   at ServerResponse.render (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\response.js:961:7)
   at C:\School\SSS 2015\testen\node-ejs-master\app.js:61:6
   at Layer.handle [as handle_request] (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\layer.js:95:5)
   at next (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\route.js:131:13)
   at Route.dispatch (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\route.js:112:3)
   at Layer.handle [as handle_request] (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\layer.js:95:5)
   at C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\index.js:277:22
   at Function.process_params (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\index.js:330:12)
   at next (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\index.js:271:10)
   at C:\School\SSS 2015\testen\node-ejs-master\node_modules\express-myconnection\lib\express-myconnection.js:123:9
   at Layer.handle [as handle_request] (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\layer.js:95:5)
   at trim_prefix (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\index.js:312:13)
   at C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\index.js:280:7
   at Function.process_params (C:\School\SSS 2015\testen\node-ejs-master\node_modules\express\lib\router\index.js:330:12)

Thanks for the help!


Solution

  • I think that this is the solution for your issue

    // Don't separate the routes. If you are setting your routes in this file, try keep every route at the same file.
    
    app.get('/', function(req, res) {
        req.getConnection(function(err, connection) {
            connection.query('SELECT * FROM pictures', function(err, results) {
                res.locals.pictures = results;
                console.log(results);
                res.render('pages/index', {pictures : results});
            });
        });
    });
    
    // index page 
    app.get('/home', function(req, res) {
        res.render('pages/index');
    });
    
    // index page 
    app.get('/index', function(req, res) {
        res.render('pages/index');
    });
    

    You have to see errors when you enter /home or /index but shouldn't have problem with /.

    If you are trying that these three routes executes the same you could try this:

    app.get('/', renderPageIndex)
    
    // index page 
    app.get('/home', renderPageIndex)
    
    // index page 
    app.get('/index', renderPageIndex )
    
    function renderPageIndexfunction(req, res) {
        req.getConnection(function(err, connection) {
            connection.query('SELECT * FROM pictures', function(err, results) {
                res.locals.pictures = results;
                console.log(results);
                res.render('pages/index', {pictures : results});
            });
        });
    });