Using reserved word with ejs - javascript

if I try to compile an EJS template like below:
var data = { case: 'Something' };
var html = ejs.render('Case <%= case %>', data);
I get the error:
ejs.js:550 Uncaught SyntaxError: Unexpected token case while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
at new Function (<anonymous>)
at Template.compile (ejs.js:550)
at Object.compile (ejs.js:359)
at handleCache (ejs.js:202)
at Object.exports.render (ejs.js:385)
at VM546 script.js:2
It's because case is a reserved word. Is there a way around it, given that I cannot change the JSON I'm feeding into EJS?
Edit: here's a link to an online Plunker - https://plnkr.co/edit/WBpjom

It looks like EJS, also set's a context called locals that is passed..
So..
var html = ejs.render('Case <%= locals.case %>', data)

Related

Access Node.js variable from javascript file in front end

Is it possible to access a node.js variable from the backend in a javascript file with pug?
It seems to work when using inline javascript inside the pug template, but I can't get it to work if when link to a .js file.
This is my router:
router.get("/test", function (req, res) {
testVar = {
title: "Test Title",
string: "Test string"
};
res.render("test", { testVar: testVar });
});
My template looks like this:
h1 #{testVar.title}
div #{testVar.string}
//- Inline JavaScript works
script.
var object = !{JSON.stringify(testVar)};
console.log(object.title);
console.log(object.string);
//- This does not work
script(src="/javascripts/test.js")
test.js have the same content as the inline javascript:
var object = !{JSON.stringify(testVar)};
console.log(object.title);
console.log(object.string);
If I try to run it with test.js enabled I get an error saying:
Uncaught SyntaxError: missing : after property id
the problem is with !{JSON.stringify(testVar)}
JSON.stringify turns your object to a string, then you put it in an object and turn it into a boolean.
So var object isn't an object and you're getting an error when referring to object.id.
You can test this by console.log(object) or even testVar.

Angular Error: $parse:ueoe Unexpected End of Expression with EJS

I'm getting unexpected End of expression error when I pass nodejs data to to ng-init. I'm confident I'm doing it right however I'm getting the error message above
I call ng-init like so:
<body id="myPage" ng-app="myApp" ng-controller="arrCtrl" ng-init="items = <%- JSON.stringify(myitems) %>">
and the error is here
Unexpected end of expression: items = [{
Thus when I run
{{items}}
It'll display as is.
I also went ahead and declared my module in my script tag just in case like so
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function(){
console.log("Controller loaded");
});
</script>
I looked everywhere and no one seemed to have solved this issue.

Uncaught ReferenceError for constant defined in same file

I'm using remark-math to render maths equations from Markdown. This has previously been working without a hitch, however after I refactored some seemingly unrelated code, I now get the following exception:
Uncaught ReferenceError: INLINE_MATH_DOUBLE is not defined
at Of.inlineTokenizer (inline.js:12)
at Of.tokenize [as tokenizeInline] (tokenizer.js:111)
at Of.atxHeading (heading-atx.js:148)
at Of.tokenize [as tokenizeBlock] (tokenizer.js:111)
at Of.parse (parse.js:41)
at Function.parse (index.js:275)
at pipelineParse (index.js:22)
at wrapped (index.js:93)
at next (index.js:56)
at Object.run (index.js:30)
The relevant code from ./node_modules/remark-math/inline.js looks like the following:
const ESCAPED_INLINE_MATH = /^\\\$/
const INLINE_MATH = /^\$((?:\\\$|[^$])+)\$/
const INLINE_MATH_DOUBLE = /^\$\$((?:\\\$|[^$])+)\$\$/ // << defined here?
module.exports = function inlinePlugin (opts) {
function inlineTokenizer (eat, value, silent) {
let isDouble = true
let match = INLINE_MATH_DOUBLE.exec(value) // << line 12, error here
// ...remaining code
The constant appears to be defined in scope!
I'm building using webpack and the chentsulin/electron-react-boilerplate template. Any hints as to why this kind of exception would suddenly be happening? (I've tried a complete reinstall of node_modules.)
maybe some issues happen from webpack building.
if the error still happen, and you want to avoid it, you can use this
GLOBAL.INLINE_MATH_DOUBLE = /^\$\$((?:\\\$|[^$])+)\$\$/
I reinstalled the dependencies with yarn instead of npm and the issue went away.

Uncaught TypeError: Cannot read property foo of undefined

My JavaScript:
todo.completed = !todo.completed;
ERROR:
Uncaught TypeError: Cannot read property 'completed' of undefined
at Object.toggleCompleted (script.js:34)
at Object.toggleCompleted (script.js:89)
at HTMLButtonElement.onclick ((index):33)
toggleCompleted # script.js:34
toggleCompleted # script.js:89
onclick # (index):33
Am I missing something here?
It looks like you haven't declared the variable todo yet. Try something like todo = {}; Let me know if you have questions!
The variable todo has passed out of scope. It's probably declared in a function that is outside the closure of handlers.toggleCompleted() when it is called.
There are a couple of ways to fix this, but as the simplest you can just make todo global:
Find var todo and remove var from the start.
At the top of your JS add var todo = {};
This will make todo a global object that's always defined on your page.
What's so confusing about it is that the code will work in Plunkr, glitch or codepen, but not a text editor and browser, because of the way those sites's routing is set up. In your index.html file you need to replace <script src = "filename.js></script>
with
<script src="entire path to filename.js"></script>

Getting: Uncaught TypeError: Invalid template!...in mustache.js

I have been trying to implement external templates, but to no avail.
This is the full error:
Uncaught TypeError: Invalid template! Template should be a "string" but "undefined" was given as the first argument for mustache#render(template, view, partials)
I am using browserify-shim for some other dependencies, but they work perfectly, and I am not getting errors (from that task) from the terminal. It's just the external template loading which is giving me problems.
function templateLoader(e) {
var doc = document,
event = EventUtility.getEvent(e),
target = EventUtility.getTarget(event);
$("body").load("templates/index.html #overlay", function() {
var temp1 = $('#overlay').html();
var output = Mustache.render(temp1);
$("body").html(output);
});
}
var flimFlam = document.getElementById('Container');
EventUtility.addHandler(flimFlam, 'click', templateLoader);
Thanks so much in advance!
Try to put everything in
$(document).ready(function(){
});
I had the same error and it worked for me.
because your Mustache template is probably nested in the rendering template. separate them and this error should go away.

Categories

Resources