Issue compiling Jinja Template

1

Hi Team,
I am creating a custom page and when I try to use loop.index variable or range function in the template, I get a compilation error in the javascript on browser.

The template looks like

<ul>
	{% for item in data %}
	{% set loop_revindex = loop.index %}

	  <li>{{ loop_revindex }}</li>
	{% endfor %}
</ul>

this gives an error which says

Unexpected identifier 'loop_revindex'
SyntaxError: Unexpected identifier 'loop_revindex'
    at new Function (<anonymous>)
    at frappe.template.compile (http://one.localhost:8000/assets/frappe/dist/js/desk.bundle.X36ZLV6H.js:38692:42)
    at frappe.render (http://one.localhost:8000/assets/frappe/dist/js/desk.bundle.X36ZLV6H.js:38705:28)
    at frappe.render_template (http://one.localhost:8000/assets/frappe/dist/js/desk.bundle.X36ZLV6H.js:38719:19)
    at Object.callback (organization_archite.js:29:13)
    at Object.callback [as success_callback] (http://one.localhost:8000/assets/frappe/dist/js/desk.bundle.X36ZLV6H.js:33662:21)
    at 200 (http://one.localhost:8000/assets/frappe/dist/js/desk.bundle.X36ZLV6H.js:33698:39)
    at Object.<anonymous> (http://one.localhost:8000/assets/frappe/dist/js/desk.bundle.X36ZLV6H.js:33840:11)
    at fire (http://one.localhost:8000/assets/frappe/dist/js/libs.bundle.6XLVBACU.js:1751:39)
    at Object.fireWith [as resolveWith] (http://one.localhost:8000/assets/frappe/dist/js/libs.bundle.6XLVBACU.js:1837:19)

The browser console logs

TypeError: frappe.template.compile(...) is not a function
    at frappe.render (microtemplate.js:100:42)
    at frappe.render_template (microtemplate.js:114:16)
    at Object.callback (organization_archite.js:29:13)
    at Object.callback [as success_callback] (request.js:85:16)
    at 200 (request.js:128:34)
    at Object.<anonymous> (request.js:294:6)
    at fire (jquery.js:3500:31)
    at Object.fireWith [as resolveWith] (jquery.js:3630:7)
    at done (jquery.js:9796:14)
    at XMLHttpRequest.<anonymous> (jquery.js:10057:9)

on using the template

<ul>
	{% for i in range(0,10) %}
	  <li>{{ i }}</li>
	{% endfor %}
</ul>

I get a similar error. Can someone please help…

2

Hi @luckyabhishek,

Please check it.

<ul>
  {% for item in data %}
    <li>{{ item.index + 1 }}. {{ item.item }}</li>
  {% endfor %}
</ul>

Set your according.

Thank You!

3

Your code is a valid Jinja2 template, that would normally run on the server side.
The stack trace you’ve pasted says it’s run in the browser with microtemplate.js, which seems to have a bit different syntax.

Can you link the documentation/tutorial you’re following?

4

BTW, you can test jinja2 templates here (yours works)

5

Thanks for the response @mattesilver
I am trying to follow the video on https://frappe.school/courses/frappe-framework-course/learn/12.1

Is there a separate document to run jinja in frappe on server ? Based on the course I was under the assumption that it runs only on client!!

6

I don’t think Frappe supports server side rendering for pages, but maybe someone smarter than me can give you better answer.

Looking at frappe/public/js/frappe/microtemplate.js, these aren’t really Jinja templates, they have similar syntax to Jinja, but in fact they’re converted to JS and executed on the client. Technically this is different from the frappe.render_page on the server side as documented in the python API.

Since the Frappe team intended it to be compatible with Jinja (I guess), you can raise an issue in github.

For a workaround, try viewing the rendered template (js function) and see if you can make your template compile to a valid JS. In case you’re stuck, you should be able to run frappe.template.compile(template) in your browser’s console.

Good luck.

7

It just came to me that you could try writing template directly in JS. maybe the conversion function won’t break it.

edit: try using item._index

8

makes sense @mattesilver . I ended up using pure javascript with dom manipulation to arrive at the result i desired.
I think you are right about frappe using server side rendering … it is a bit confusing functionality for a newbie like me…
thanks again for quick help on this