Pandas dataframe to flask template as a json

Question

I try to output a pandas dataframe in a flask template. My idea was to transform it to json and then loop through the table

I tested this

jsonfiles = df.to_json(orient='records')

return render_template('index.html', ctrsuccess=jsonfiles)

In the template I try to output like this:

        {%if ctrsuccess %}
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    {%for ctrrow in ctrsuccess %}
                    <tr>
                        <td>{{ ctrrow['positionint'] }}</td>
                    </tr>
                    {%endfor%}
                </tbody>
            </table>
        </div>
        {%endif%}

In the template i get a proper looking json if i just draw ctrsuccess. But the table is empty

[{"positionint":1.0,"clicks":1138.0,"impressions":4768.0,"ctr":0.2386744966,"clickCtr10p":1251.8,"clickCtr50p":1707.0,"clickCtr100p":2276.0},{"positionint":2.0,"clicks":3160.0,"impressions":49899.0,"ctr":0.0633279224,"clickCtr10p":3476.0,"clickCtr50p":4740.0,"clickCtr100p":6320.0},{"positionint":3.0,"clicks":1255.0,"impressions":50020.0,"ctr":0.025089964,"clickCtr10p":1380.5,"clickCtr50p":1882.5,"clickCtr100p":2510.0},{"positionint":4.0,"clicks":363.0,"impressions":39077.0,"ctr":0.0092893518,"clickCtr10p":399.3,"clickCtr50p":544.5,"clickCtr100p":726.0},{"positionint":5.0,"clicks":216.0,"impressions":18419.0,"ctr":0.011727021,"clickCtr10p":237.6,"clickCtr50p":324.0,"clickCtr100p":432.0},{"positionint":6.0,"clicks":307.0,"impressions":15447.0,"ctr":0.0198744093,"clickCtr10p":337.7,"clickCtr50p":460.5,"clickCtr100p":614.0},{"positionint":7.0,"clicks":248.0,"impressions":24709.0,"ctr":0.0100368287,"clickCtr10p":272.8,"clickCtr50p":372.0,"clickCtr100p":496.0},{"positionint":8.0,"clicks":236.0,"impressions":26853.0,"ctr":0.0087885897,"clickCtr10p":259.6,"clickCtr50p":354.0,"clickCtr100p":472.0},{"positionint":9.0,"clicks":139.0,"impressions":26577.0,"ctr":0.0052300862,"clickCtr10p":152.9,"clickCtr50p":208.5,"clickCtr100p":278.0},{"positionint":10.0,"clicks":23.0,"impressions":2046.0,"ctr":0.0112414467,"clickCtr10p":25.3,"clickCtr50p":34.5,"clickCtr100p":46.0},{"positionint":null,"clicks":7085.0,"impressions":257815.0,"ctr":null,"clickCtr10p":7793.5,"clickCtr50p":10627.5,"clickCtr100p":14170.0},{"positionint":null,"clicks":null,"impressions":null,"ctr":null,"clickCtr10p":1417.0,"clickCtr50p":7085.0,"clickCtr100p":14170.0}]

Solution

Per pandas docs, to_json renders a json string which you can confirm with type(jsonfiles). Though the print output looks like a json object, single quotes will wrap at beginning and end.

To resolve, simply import the built-in json module (part of Python standard library) and parse the to_json string into a json object with loads method:

import json
...

jsonfiles = json.loads(df.to_json(orient='records'))

return render_template('index.html', ctrsuccess=jsonfiles)