Rendering to Js with Jinja Produces Invalid Number Rather Than String

Rendering to JS with Jinja produces invalid number rather than string

The problem is that

{{ '1.1.1.1' }}

renders as

1.1.1.1

Quotes are not included. JavaScript tries to parse this as a number and can't. Fortunately, Flask includes a Jinja filter for this.

var tmp = {{ value|tojson }};

tojson will include quotes around strings and omit them for numeric values. The filtered value, when rendered by Jinja, is valid JavaScript with the correct type.

Can't define two var in javascript

Seems you should be using the tojson() filter for dynamic JavaScript generation, ie

var v_first = {{ pass_kegg|tojson|safe }},
    v_seconde = {{ pass_tmp|tojson|safe }};

It's good practice to terminate expressions with a semi-colon but it's definitely not required. See What are the rules for JavaScript's automatic semicolon insertion (ASI)?

Javascript computes string sent from Flask as integers

var startDate = {{ start_date }};

is rendered as

var startDate = 03/28/2016;

That results in the math of 3 divided by 28 divided by 2016, or 0.0000531462585..

You can use a couple of Flask and Jinja2 filters to intelligently handle strings as strings and numbers as numbers.

var startDate = {{ start_date|tojson|safe }};

will render as

var startDate = '03/28/2016';

or something along those lines.

TypeError: Undefined is not JSON serializable

Jinja doesn't understand JavaScript. Jinja is rendered on the server, then the JavaScript is executed on the client. You can't take a variable i from a JavaScript loop and use it in a Jinja expression. Instead, set a JavaScript variable to the Jinja expression, then use that variable in your loop.

var message = {{ message|tojson }};
for (var i = 0; i < message['mac'][0].length; i++) {
    var item = message['mac'][0][i];
}

If you just want to output the data, there's no need to use JavaScript. Just render it directly in Jinja.

<ul>{% for item in message.mac[0] %}
    <li>{{ item }}</li>
{% endfor %}</ul>

Using JavaScript variable while accessing a Jinja template value

Jinja variables are ONLY set at render time and what you are trying to do is impossible.

This is pseudo code, but you could potentially declare a js variable with your jinja json and access that:

var config = {{ config | tojson }};
function dispDetails()
{
    titleStr = "firstTitle";
    console.log(config[titleStr]);
}

Jinja - Convert element to string and call JS function

Jinja renders the string variables without any surrounding quotes. So:

<button onclick="foo({{n}})">{{n}}</button>

becomes

<button onclick="foo(Rome)">Rome</button>

…which obviously makes the JS engine look for a variable called Rome.

Just put your own quotes around it to make it a string in JS:

<button onclick="foo('{{n}}')">{{n}}</button>

→

<button onclick="foo('Rome')">Rome</button>

how can I pass data from html to component(angular2)

The short answer: no, you can't. But you can create global js variables

<body>
    <script type="text/javascript">
        keys = '{{keys}}'
        Name = '{{Name}}'
        Email = '{{Email}'
    </script>
</body>

Then in your component

public keys = window['keys']);

And in your angular html

{{ keys }}

Flask filename substitution

You need quotes " " in

var f = "{{fn}}";

to get result similar to

var f = "customer_xxx.csv";

Rendering to Js with Jinja Produces Invalid Number Rather Than String