0

I'm using flask to render index page

app = Flask(__name__)
@app.route("/")
def main():
    return render_template('index.html')

I'm sending the results in an ajax call made to an flask REST API. I'm able to build table using Jquery but If I'm using angularjs ng-repeat for a table like below

<table>
    <tr data-ng-repeat="r in regResults">
        <td>{{r.TCID}}>
    </tr>
</table>

I'm getting the below error

[2018-01-30 16:50:32,833] ERROR in app: Exception on / [GET]
UndefinedError: 'r' is undefined
Krishna
  • 1,089
  • 5
  • 24
  • 38

1 Answers1

1

That's because Angular and Jinja2 use {{}} as template tags to print out variables. Jinja2 processes the template before it's rendered by the browser (and eventually picked up by Angular). The simplest solution is to enclose the block in {% raw %} like this:

{% raw %}
<table>
    <tr data-ng-repeat="r in regResults">
        <td>{{r.TCID}}>
    </tr>
</table>
{% endraw %}

This tells jinja2 not to interfere with that section of the template.

If you find yourself with too many {% raw %} tags it might be time to separate your frontend from the backend and communicate over an API.

danidee
  • 9,298
  • 2
  • 35
  • 55
  • Can you help me on separating frontend & backend – Krishna Jan 31 '18 at 13:07
  • @Krishna I'm not saying your approach is entirely wrong. This approach is perfect for a small website. To separate the frontend and backend you'll need to build an API in Flask that takes a request and returns `JSON` (No rendering of templates) and then your Angular app will get its information from there. The UI aspects of your application would be handled entirely by Angular. – danidee Feb 01 '18 at 05:03