express+jade: provided local variable is undefined in view (node.js + express + jade) - node.js

I'm implementing a webapp using node.js and express, using the jade template engine.
Templates render fine, and can access helpers and dynamic helpers, but not local variables other than the "body" local variable, which is provided by express and is available and defined in my layout.jade.
This is some of the code:
app.set ('view engine', 'jade');
app.get ("/test", function (req, res) {
res.render ('test', {
locals: { name: "jake" }
});
});
and this is test.jade:
p hello
=name
when I remove the second line (referencing name), the template renders correctly, showing the word "hello" in the web page. When I include the =name, it throws a ReferenceError:
500 ReferenceError: Jade:2 NaN. 'p hello' NaN. '=name' name is not defined
NaN. 'p hello'
NaN. '=name'
I believe I'm following the jade and express examples exactly with respect to local variables. Am I doing something wrong, or could this be a bug in express or jade?

app.set ('view engine', 'jade');
app.get ("/test", function (req, res) {
res.render ('test', {
name: "jake"
});
});
you can do it like this.

Rather than =, you can use #{variable-name}. Here is an example of how I'm using it:
This will render a page, with a menu for navigation. Passing the page title in each time the page is loaded, ofcourse you will need to create an app.get function for each page.
App.js
var navigation = {
home : {
uri : "/",
url : "index",
title : "Home"
},
lab : {
uri : "/lab",
url : "lab",
title : "Lab"
},
profile : {
uri : "/profile",
url : "profile",
title : "Profile"
},
timetable : {
uri : "/timetable",
url : "timetable",
title : "Timetable"
}
}
app.get(navigation.profile.uri, function(req, res){ //Profile
res.render(navigation.profile.url, {
title: navigation.profile.title,
navigation: navigation
});
});
profile.jade
section#page-content
h1#page-title #{title}
p Welcome to #{title}
layout.jade
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/reset.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
header#site-header
nav#site-navigation
!= partial("partials/navigation")
section!= body
footer#page-footer

I think the error is sometime caused due to the request by the browser for favicon.ico.
Try adding these lines to the layout.jade head to link the icon
link(rel='icon', href='/images/siteicon.png')
This removed the same error that I was getting

Related

Pug not rendering variables defined in res.render

Does anybody know why my tour variable is not rendered on the site. My paragraph is rendered but tour is undefined
app.get('/', (req, res) => {
res.status(200).render('base', {
tour: 'The Forest Hiker',
user: 'Eldin',
});
});
(base.pug file)
doctype html
html
head
title Natours
link(rel='stylesheet' href='css/style.css')
link(rel='shortcut icon' type='image/png' href='img/logo.png')
body
h1= tour
p This is just some text
I found the answer. It should be used #{tour}

Access Object in Pug

i wanna to access at my var tab in my console on front
this is my backend code
let tab= global.queue.GetListOfTraitement();
res.render('index', { title: 'Express', test: tab});
the result in backend console
[ status {
Type: 'File',
NomFichier: 'F1504365806Mcmhs784.avi',
Depart: 1504880910657 },
status {
Type: 'File',
NomFichier: 'F1504364893Euyza324.avi',
Depart: 1504881249064 } ]
my pug file
extends layout
block content
h1= title
p Welcome to #{test}
h2= title
script.
console.log(test);
div
div
my result web page
Express
Welcome to [object Object]
Express
my result in console web
ReferenceError: test is not defined
my object is send has string [object Object] i can't acces of property of my object.
Can you help me please?
i have the solution, i can't show the index number with my console on backend, now i know i have index number
block content
h1= title
p Welcome to #{test[0].Type}
h2= title
table
But i always don't know how to pass object from backend to frontend.
You need to convert it to a string, with JSON.Stringify() then you can display the content of the object.

Issue getting information to jade template with angular

I am working on a simple web app (new to it) and I am using jade/angular. I am trying to get a list to display some information, this is what I have:
layout.jade:
doctype
html(ng-app)
head
title= title
script(type='text/javascript', src='javascripts/lib/angular.min.js')
script(type='text/javascript', src='javascripts/lib/angular-resource.min.js')
script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(type='text/javascript', src='public/javascripts/app2.js')
link(rel='stylesheet',type='text/css', href='/stylesheets/boostrap.css')
body
block content
index.jade:
extends layout
block content
h1= title
div(class="container" ng-controller="AppCtrl")
h1 Angulair
ul(ng-repeat="airport in airports")
li {{airport.code}}
li {{airport.name}}
li {{airport.destination}}
and finally app2.js:
function AppCtrl ($scope){
$scope.airports = {
"PDX": {
"code": "PDX",
"name": "Portland",
"city": "Toronto"
}
};
}
EDIT: Everything below here is an edit...
I am working with node as well, this is what my project looks like
node_modules/
public/
img/
javascripts/
app2.js
stylesheets/(bootstrap files in here)
routes/
index.js
views/
partials/
index.jade
layout.jade
app.js
package.json
Also, I am using node for this project, In app.js I make a call to:
app.get('/', routes.index);
index.js:
exports.index = function(req, res){
res.render('index', { title: 'Angular Basic' });
};
As you can see, very simple stuff, but I cannot seem to get the list to display that airport information. Am I wrapping the jade template with angular correctly?
I CHANGED THE SCRIPTS IN layout.jade to include the angular resources. Now Nothing appears. I also added the brackets around the elements in the list tags, as suggested below. Still nothing appears.
tire0011 + Daiwei are both correct.
It's not your jade that is the problem. Here's a working sample incorporating tire0011 + Daiwei's suggestions:
http://plnkr.co/edit/q2DMGO0P50nWdf1PGlNJ?p=preview
you need to add a app module name
doctype
html(ng-app="appName")
then in your script first create your module and then the controller
var myModule = angular.module('appName', []);
myModule.controller("AppCtrl", function ($scope) {
// do your stuff
}
The problem is in your li tag, use {{ XXX }} to wrap your properties
li {{ airport.code }}
li {{ airport.city }}
li {{ airport.name }}

Send multiple variables through render with Express

Maybe a stupid question but, is it possible to send multiple variables through res.render() in Express ?
Because, when I do
res.render('index', { title: 'Express', name: 'Arnaud' });
I've all this pretty error telling me name is not defined.
In this view
extends layout
block content
h1 Salut #{name}
p Welcome to #{title}
Any idea ?
In route:
res.render("index", { data: { title: "Express", name: "Arnaud" } })
In view:
<%= data.title %>
<%= data.name %>
I also got this problem for a long time and found a workaround: to pass a variable you just should do
res.locals.title = "Express";
res.locals.name = "Arnaud"
res.render("index");
The both variables Express and Arnaud will be given to the EJS context
Weird thing is weird : I regenerated a new Express project and everything is fine...

Linking to other jade files

I'm trying to understand how Express and Jade works.
First of all, am I doing it right when I'm using layout.jade as a template file (header, body, footer) and using different files to show information in the body (see examples below)?
The code works fine, but i'm unsure if this is the right way to do stuff in Express. If I should keep going with this structure, how can I link to other files (eg.About.jade) internally from for example index.jade, to show that file instead of index.jade?
Thanks in advance!
layout.jade:
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js')
script(type='text/javascript', src='/javascripts/external.js')
// Header
header#header
// Navigation
nav#nav
// Navigation code (ul, li etc)...
// Sidebar
aside#sidebar
// Sidebar code...
// Body
body!= body
index.jade:
!!! 5
html
head
title= title
section#wrapper
img.imageStyle(src = '/images/test1.png')
// And so on...
About.jade:
// You get it...
I think what you're looking for are view rendering routes in express:
http://expressjs.com/en/guide/using-template-engines.html
So you can set up something like this:
app.get('/', function(req, res){
res.render('index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('about.jade', { title: 'about' });
});
To link from one to the other, once you have the proper routes configured, you can just do something like:
a(href='/') index
a(href='/about') about
Update Also, you don't need this repeated again in index.
!!! 5
html
head
title= title
additionally to what Wes Freeman wrote you can also include other jade templates in your jade file.
that way you could have your header.jade, footer.jade and include them in your about.jade file. here's the include documentation from jade:
https://github.com/visionmedia/jade#a13
that way you only have to change the header.jade file if you add for example script or stylesheet tags that should be on every page.

Resources