How to Pass data for table from Python flask render_template to AngularJS controller

Question

I followed the below tutorial and created a successful html page to display a table. However I want to integrate the html file with my Python Flask application to render the html with table data. I tried the below code but it is not working.

http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview

<script>
  angular.module('myApp', ['trNgGrid'])
  .controller("MainCtrl", ["$scope", function ($scope) {

     $scope.myItems = [
        {% for data in datas %}
        {
            {% for key, value in data.items() %}
                {% if value is string %}
                    '{{ key }}': '{{ value }}',
                {% else %}
                    '{{ key }}': {{ value }},
                {% endif %}
            {% endfor %}
        },
        {% endfor %}
    ];

}]);
</script>

routes.py

@app.route('/page')
def jumping():
    df = pd.read_csv(REPORT_CSV)
    arr = [row for row in df.to_dict(orient='records')]
    return render_template('page.html', datas=arr)

I tried a lot but stuck here. Desparately need some solution. Thanks in advance.

Pandurang Choudekar · Accepted Answer · 2020-03-17 16:19:41Z

1

Its quite hard to render data from flask Jinja objects, then it will initialize in AngularJS controller. I have better and simple approach than this.

from flask import jsonify, render_template

@app.route('/page')
def jumping():
    return  render_template('index.html')

@app.route('/page/list-records')
def list_records():
    df = pd.read_csv(REPORT_CSV)
    arr = [row for row in df.to_dict(orient='records')]
    return  jsonify({'datas'=arr})

You need to change something in the AngularJS controller, following code will be giving you more information about implementation.

angular
.module('myApp', ['trNgGrid'])
.controller("MainCtrl", ["$scope", "$http" function ($scope, $http) {
    $scope.myItems = [];
    $http.get('/page/list-records').then(function (resp) {
         $scope.myItems = resp.data.datas;
    }
}]);

answered Mar 17, 2020 at 16:19

Pandurang Choudekar

4022 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

saptarshi Over a year ago

Thank you. It worked. I need to also setup flask-triangle and few tweeks for the same but I made it work.

Pandurang Choudekar Over a year ago

yes, its working. but I have a suggestion for you too, use Blueprint for separation of route member.

Collectives™ on Stack Overflow

How to Pass data for table from Python flask render_template to AngularJS controller

routes.py

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

routes.py

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related