"uncaught Syntax error: unexpected token {" when exporting JSON content to bootstrap table script

Question

I am trying to convert data under django pandas dataframe to json and then to table using pandas_bootstrap_table. The error in browser console is "uncaught Syntax error: unexpected token {"

Here is my view function

    def productview(request):
        qs = npmargin.objects.filter(user=selected_user)
        df = convert_to_dataframe(qs, fields=['gross_profit_margin_2015',])
        json = df.to_json(orient='records')
        context = {
                "data": "json"
            }
        return render (request, 'operating/chart2.html', context)

Below is charts2.html

    {% load static %}
    <script src="{%static "js/bootstrap.min.js"%}"></script>
    <script src="{%static "js/jquery-slim.min.js"%}"></script>
    <script src="{%static "js/bootstrap-table.js"%}"></script>
    <script src="{%static "js/pandas_bootstrap_table.js"%}"></script>
    <table id='datatable'></table>

The Json data from the above view function is sent to pandas_boostrap_table.js. The browser shows the unexpected token "{" error at the data:{{data|safe}}

    $(document).ready(function(){
    $('#datatable').bootstrapTable({
    striped: true,
    pagination: true,
   showColumns: true,
   showToggle: true,
  showExport: true,
   sortable: true,
   paginationVAlign: 'both',
   pageSize: 25,
   pageList: [10, 25, 50, 100, 'ALL'],
   data:{{data|safe}}, //"The browser console shows error here"
});

});

Answer 1

The code in js/pandas_bootstrap_table.js isn't being parsed by the Django templating engine. The means {{ data|safe }} isn't being substituted with the data value from the view.

You'll want to move the code from pandas_bootstrap_table.js to someplace where the Django templating engine will substitute the value of data with its actual contents. Something to the effect of:

# views.py
def productview(request):
    qs = npmargin.objects.filter(user=selected_user)
    df = convert_to_dataframe(qs, fields=['gross_profit_margin_2015',])
    json = df.to_json(orient='records')
    context = {
            "data": json  # be sure to remove the quotes around json
        }
    return render (request, 'operating/chart2.html', context)

# chart2.html
{% load static %}
<script src="{%static "js/jquery-slim.min.js"%}"></script>
<script src="{%static "js/bootstrap.min.js"%}"></script>
<script src="{%static "js/bootstrap-table.js"%}"></script>
<table id='datatable'></table>
<script>
$(document).ready(function(){
    $('#datatable').bootstrapTable({
        striped: true,
        pagination: true,
        showColumns: true,
        showToggle: true,
        showExport: true,
        sortable: true,
        paginationVAlign: 'both',
        pageSize: 25,
        pageList: [10, 25, 50, 100, 'ALL'],
        data: {{data|safe}}, // view source in your browser to see the value of data being printed out
    });
});
</script>