NODE.JS / EJS - ReferenceError: file.ejs can't recognize definition of variables

Question

I have an issue with how my express.js server is templating. I'm getting an error that 'x is not defined' but I literally can't see anywhere that I'm messing something up. Cross checked some friends code who's working the same tutorial and on his machine it works.

FILE.EJS:

<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        {% for (var x in cats) { %}
            <a href=<%= cats[x].href %>><%= cats[x].name%></a>
        {% } %}
    </body>
</html>

SERVER.JS:

var express = require("express");
var app = express();

app.use(express.static(__dirname + '/static'));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs')

app.get("/", function (request, response) {
    response.render("cats")
})
app.get("/cats", function (request, response) {
    var kitty_arr = [
        {name: "Zues", age: "2", href: "/cats/zues"},
        {name: "Scarlet", age: "3", href: "/cats/scarlet"},
        {name: "Saphire", age: "1", href: "/cats/saphire"},
    ];
    response.render("cats", {cats: kitty_arr})
})
app.get("/cats/zues", function (request, response) {
    console.log('hit zues')
    var kitty_arr = [
        {name: "Zues", age: "2", hobbies: "Head big boss of catnip cartel, loves the finer things in life", favetoys: ['catnip', 'whiskey', 'gold mc-hammer pants']},
    ]
    response.render("cats", {kitties: kitty_arr})
})
app.get("/cats/scarlet", function (request, response) {
    console.log('hit scarlet')
    var kitty_arr = [
        {name: "Scarlet", age: "3", hobbies: "Misunderstood weird artist, loves to hang in the background and paint", favetoys: ['catnip', 'whiskey', 'gold mc-hammer pants']},
    ]
    response.render("cats", {kitties: kitty_arr})
})
app.get("/cats/saphire", function (request, response) {
    console.log('hit saphire')
    var kitty_arr = [
        {name: "Saphire", age: "1", hobbies: "Chunky little thing that has no talents other than running real slow and cuddling", favetoys: ['catnip', 'whiskey', 'gold mc-hammer pants']},
    ]
    response.render("cats", {kitties: kitty_arr})
})
app.listen(8000, function() {
    console.log('yatzi')
})

TRACE:

ReferenceError: /Users/a666/Desktop/Development/MEAN/Express.js/catsData/views/cats.ejs:8
    6|     <body>
    7|         {% for (var x in cats) { %}
 >> 8|             <a href=<%= cats[x].href %>><%= cats[x].name%></a>
    9|         {% } %}
    10|     </body>
    11| </html>

x is not defined
    at eval (eval at compile (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/ejs/lib/ejs.js:618:12), <anonymous>:11:31)
    at returnedFn (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/ejs/lib/ejs.js:653:17)
    at tryHandleCache (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/ejs/lib/ejs.js:251:36)
    at View.exports.renderFile [as engine] (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/ejs/lib/ejs.js:482:10)
    at View.render (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/express/lib/view.js:135:8)
    at tryRender (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/express/lib/application.js:640:10)
    at EventEmitter.render (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/express/lib/response.js:1008:7)
    at /Users/a666/Desktop/Development/MEAN/Express.js/catsData/server.js:17:14
    at Layer.handle [as handle_request] (/Users/a666/Desktop/Development/MEAN/Express.js/catsData/node_modules/express/lib/router/layer.js:95:5)

Edwin Babu · Answer 1 · 2018-07-07T04:03:00.297

0

Your ejs file is wrong, you have written the tags of jade template

<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <% for (var x=0;x<cats.length;x++) { %>
        <a href="<%= cats[x].href %>"><%= cats[x].name %></a>
    <% } %>
</body>

Try this code.

edited Jul 07 '18 at 04:03

answered Jul 07 '18 at 03:11

Edwin Babu

709
8
15

strange, this is what my friend had character for character. Still doesn't work with single ticks? – Austin Atendido Jul 07 '18 at 03:27
are you still getting the error after changing {% to <%. If yes, show me the error. – Edwin Babu Jul 07 '18 at 03:53
Yeah, now the error has moved onto a reference error in relation to cats: 'cats is not defined', line 7 in cats.ejs. – Austin Atendido Jul 07 '18 at 04:03
try <%= cats %> inside body tag and see if its working or throwing error in that line – Edwin Babu Jul 07 '18 at 04:13
Didn't think of that. Good call. Yeah thats what is weird and what I suspected. It works that way, it's displaying the cat objects in the array, and even when I do `<%= cats[0].href %>` it pulls up the 'href' key in object thats at the zeroth position. For one reason or another its not passing through into the scope of the loop. – Austin Atendido Jul 07 '18 at 04:31
I have updated the for loop in the code. Check that, it worked for me – Edwin Babu Jul 07 '18 at 04:36
Thanks Edwin. Still no dice. I'm pretty sure my error is elsewhere, not in my ejs file. Do you mind showing me the route in your server.js thats being pulled into that loop you updated??? – Austin Atendido Jul 07 '18 at 04:57

NODE.JS / EJS - ReferenceError: file.ejs can't recognize definition of variables

1 Answers1