为什么只有在Flask中执行JavaScript时，JavaScript才应访问Flask发送的列表<script> tag in HTML?

Question

I would like to send a list to JavaScript from Flask. I noticed that if I write JavaScript code inside an HTML tag it works, while if I do the same thing in a file linked inside the header I get the following error:

Uncaught SyntaxError: Unexpected token {

The javascript code is as follows:

var docs = {{ txtDocs | tojson }};
console.log(docs);

The Python code is the following:

app = Flask(__name__)
@app.route('/')
def landingPage():
    return render_template('landingPage.html', txtDocs=json.dumps(os.listdir(pathToTxtDocs)))

I think that piece of JavaScript code inside the HTML is interpreted by Jinja2, while in case the js code is inside a file it is not interpreted. I'm quite sure. But I would like to have separate html code and javascript code, for better reading.
So, is there a way to read a list sent by python to a js file? (Obviously linked in the HTML header).

Thanks in advance.

Answer 1

I think that piece of JavaScript code inside the HTML is interpreted by Jinja2, while in case the js code is inside a file in itself it is not interpreted

Indeed.

But I would like to have separate html code and javascript code, for better reading.

This only makes sense if your js code is used in more than one template - else having to open and read each js file linked in your template (directly or via a parent template) to find out what js code is actually executed really doesn't make your code more readable.

Now for the technical solutions: the first one is to have a function in your .js file and call it from the template - which means you'll STILL need to have some js in the template:

# yourlib.js

function doSomethingWithDocs(docs) {
    // your real code here
}

and

# template

<script src="/your/js/yourlib.js"></script>
<script>doSomethingWithDocs({{ txtDocs | tojson }});</script>

The other solution is to expose an API endpoint in your flask app that returns the docs as json already, and make a call to this endpoint in your js file. You will very probably STILL need to pass some data from the view to the template to the js function to make the correct API call though...

IOW: your code is fine this way, it works, and it's as simple and obvious as possible.