How do I pass this Javascript object into a Jinja2 template?
- From:
- Philip Goh
- Date:
- 2012-01-18 @ 16:39
Dear list,
I'm using jqPlot with flask, and I need to pass "something" from the Python
world into my Jinja2 template such that the resulting javascript will look
something like:
var seriesLabels = [
{ label : "Series 1"},
{ label : "Series 2"},
{ label : "Series 3"},
];
My attempt so far has looked something like the following:
labels = []
for op in sorted(ops):
labels.append({'label' : op })
return render_template("index.html", series_labels=labels)
This has not worked, and the javascript that's generated is wrong because
it's treating "label" as a string and not as a class field:
var seriesLabels = [{'label': u'12'}, {'label': u'15'}, {'label': u'18'},
{'label': u'20'}, {'label': u'23'}, {'label': u'26'}, {'label': u'3'},
{'label': u'31'}, {'label': u'4'}, {'label': u'5'}, {'label': u'6'},
{'label': u'9'}];
Can anyone help shed some light on what I'm doing wrong? This sounds like a
very simple task and yet it's managed to stump me for most of the afternoon.
Kind regards,
Phil
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Simon Sapin
- Date:
- 2012-01-18 @ 16:56
Le 18/01/2012 17:39, Philip Goh a écrit :
> My attempt so far has looked something like the following:
>
> labels = []
> for op in sorted(ops):
> labels.append({'label' : op })
> return render_template("index.html", series_labels=labels)
Hi,
This look right (although it can be rewritten shorter as
[{'label': op} for op in sorted(ops)] )
However, in you index.html template, doing just {{ series_label }} will
use the Python representation of your object, which is almost right but
not quite because of the u prefix for unicode strings.
Try this instead, in your template:
var seriesLabels = {{ series_label|json }};
The |json filter will serialize your object to JSON, which happens to be
the same as JavaScript syntax.
Now, this is just for the syntax. If the data inside is still wrong you
have to fix you Python code, but I’m not sure what you want there.
Regards,
--
Simon Sapin
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Philip Goh
- Date:
- 2012-01-18 @ 22:07
Hello,
Thanks for your response.
>
> This look right (although it can be rewritten shorter as
> [{'label': op} for op in sorted(ops)] )
I'm a C#/C++ coder by day and forgot about list comprehensions, so
thanks for the reminder. :)
>
> Try this instead, in your template:
>
> var seriesLabels = {{ series_label|json }};
>
> The |json filter will serialize your object to JSON, which happens to be
> the same as JavaScript syntax.
I've tried this, and I get the error "TemplateAssertionError: no
filter named 'json'". Browsing through the Jinja2 documentation at
http://jinja.pocoo.org/docs/templates/#builtin-filters I see no
mention of a filter json. Is this part of some extension?
Thanks,
Philip
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Jesse Dubay
- Date:
- 2012-01-18 @ 22:22
Hello,
It's actually "tojson" -- Flask adds it to the default Jinja environment.
http://flask.pocoo.org/docs/templating/#standard-filters
Jesse
On Wed, Jan 18, 2012 at 2:07 PM, Philip Goh <philip.wj.goh@gmail.com> wrote:
> Hello,
>
> Thanks for your response.
>
>>
>> This look right (although it can be rewritten shorter as
>> [{'label': op} for op in sorted(ops)] )
>
> I'm a C#/C++ coder by day and forgot about list comprehensions, so
> thanks for the reminder. :)
>
>
>>
>> Try this instead, in your template:
>>
>> var seriesLabels = {{ series_label|json }};
>>
>> The |json filter will serialize your object to JSON, which happens to be
>> the same as JavaScript syntax.
>
> I've tried this, and I get the error "TemplateAssertionError: no
> filter named 'json'". Browsing through the Jinja2 documentation at
> http://jinja.pocoo.org/docs/templates/#builtin-filters I see no
> mention of a filter json. Is this part of some extension?
>
> Thanks,
> Philip
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Philip Goh
- Date:
- 2012-01-19 @ 07:59
> It's actually "tojson" -- Flask adds it to the default Jinja environment.
That would explain the array I mentioned in my original post.
var seriesLabels = [{'label': u'12'}, {'label': u'15'}, {'label':
u'18'}, {'label': u'20'}, {'label': u'23'}, {'label': u'26'},
{'label': u'3'}, {'label': u'31'}, {'label': u'4'}, {'label': u'5'},
{'label': u'6'}, {'label': u'9'}];
This is similar to the output I get from json.dumps, which is not what
I'm after.
Kind regards,
Philip
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Armin Ronacher
- Date:
- 2012-01-19 @ 08:48
On 2012-01-19 8:59 AM, Philip Goh wrote:
> This is similar to the output I get from json.dumps, which is not what
> I'm after.
What else do you want? What's wrong with JSON?
<script type=text/javascript>
var objects = {{ list_of_objects|tojson|safe }};
</script>
Regards,
Armin
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Philip Goh
- Date:
- 2012-01-19 @ 09:17
On 19 January 2012 08:48, Armin Ronacher <armin.ronacher@active-4.com> wrote:
> On 2012-01-19 8:59 AM, Philip Goh wrote:
>> This is similar to the output I get from json.dumps, which is not what
>> I'm after.
> What else do you want? What's wrong with JSON?
Apparently nothing.
If I do the following:
var seriesLabels = {{ series_labels }};
I get this as output:
var seriesLabels = [{'label': u'12'}, {'label': u'15'}, {'label': u'18'}];
That's apparently not valid as my browsers (Chrome, Opera) don't render it.
If I specify the following:
var seriesLabels = {{ series_labels | tojson }};
I get this as output:
var seriesLabels = [{"label": "12"}, {"label": "15"}, {"label": "18"}];
This is now valid and my browsers render correctly. I apologise to the
list, as this now has nothing to do with Flask and all to do with my
limited understanding of Javascript (and all things webby).
I do not understand the difference, given that Javascript treats
anything enclosed between single or double quotes as strings? i.e.
'This is a string', "This is also a string".
Kind regards,
Philip
Re: [flask] How do I pass this Javascript object into a Jinja2 template?
- From:
- Jesaja Everling
- Date:
- 2012-01-19 @ 09:23
Hi Philip,
the "u" in u'12' is the culprit! ;)
I highly recommend using the Firebug console (or Chrome JavaScript
console) to test things like this, you can just paste the code in the
console and see what happens.
The version with "u" will give a SyntaxError, the tojson-filtered will not.
Best Regards,
Jesaja Everling
On Thu, Jan 19, 2012 at 10:17 AM, Philip Goh <philip.wj.goh@gmail.com> wrote:
> On 19 January 2012 08:48, Armin Ronacher <armin.ronacher@active-4.com> wrote:
>> On 2012-01-19 8:59 AM, Philip Goh wrote:
>>> This is similar to the output I get from json.dumps, which is not what
>>> I'm after.
>> What else do you want? What's wrong with JSON?
>
> Apparently nothing.
>
> If I do the following:
> var seriesLabels = {{ series_labels }};
> I get this as output:
> var seriesLabels = [{'label': u'12'}, {'label': u'15'}, {'label': u'18'}];
>
> That's apparently not valid as my browsers (Chrome, Opera) don't render it.
>
> If I specify the following:
> var seriesLabels = {{ series_labels | tojson }};
> I get this as output:
> var seriesLabels = [{"label": "12"}, {"label": "15"}, {"label": "18"}];
>
> This is now valid and my browsers render correctly. I apologise to the
> list, as this now has nothing to do with Flask and all to do with my
> limited understanding of Javascript (and all things webby).
>
> I do not understand the difference, given that Javascript treats
> anything enclosed between single or double quotes as strings? i.e.
> 'This is a string', "This is also a string".
>
> Kind regards,
> Philip