I'm using bottle for a very simple one-page website. In my route for '/', I have something like this:
@app.route('/')
def index():
data = [['A', 1], ['B', 2], ['C', 3]]
return template('index.tpl', data=data)
Then, in my template index.tpl, I want to use this data in a script that is located in <head></head>:
<head>
<script type="text/javascript">
function doSomething(some_data) {
return some_data[0];
}
function myFunc() {
var test = doSomething({{data}});
console.log(test);
}
</script>
</head>
However, this line: doSomething({{data}}) causes a syntax error: ',' expected. Declaration or statement expected.
The only way I can get around it is to add quotations like this: doSomething('{{data}}'), but then it becomes completely useless because it's a string now, and I have to convert it back to the format I need.
I have seen many solutions on StackOverflow that use {{data}} directly in JS without needing quotations, so I don't understand why it doesn't work for me. Is this because of where my script is located?
Check out view-source: or print() on the rendered template you're serving:
<head>
<script type="text/javascript">
function doSomething(some_data) {
return some_data[0];
}
function myFunc() {
var test = doSomething([['A', 1], ['B', 2], ['C', 3]]);
console.log(test);
}
</script>
</head>
You can see the special character isn't valid JS, and although I get a slightly different error than you (Uncaught SyntaxError: Unexpected token '&'), I think we're on the same page enough to offer an answer.
The docs say:
The
SimpleTemplateengine escapes HTML special characters in{{bad_html}}expressions automatically. Use the new{{!good_html}}syntax to get old behaviour (no escaping).
So let's do it:
<head>
<script type="text/javascript">
function doSomething(some_data) {
return some_data[0];
}
function myFunc() {
var test = doSomething({{!data}});
// ^ changed
console.log(test);
}
</script>
</head>
Now we get a clean result:
<head>
<script type="text/javascript">
function doSomething(some_data) {
return some_data[0];
}
function myFunc() {
var test = doSomething([['A', 1], ['B', 2], ['C', 3]]);
// ^ changed
console.log(test);
}
</script>
</head>
For completeness, here's my Bottle 0.12.19 code:
from bottle import route, run, template
@route('/')
def index():
data = [['A', 1], ['B', 2], ['C', 3]]
print(template('index.tpl', data=data))
return template('index.tpl', data=data)
run(host='localhost', port=8080)