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

Question

我正在尝试将 django pandas 数据帧下的数据转换为 json，然后使用 pandas_bootstrap_table 转换为 table。 浏览器控制台中的错误是 "uncaught Syntax error: unexpected token {"

这是我的视图函数

    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)

下面是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>

来自上述视图函数的Json数据被发送到pandas_boostrap_table.js。浏览器在数据处显示意外标记“{”错误：{{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

js/pandas_bootstrap_table.js 中的代码未被 Django 模板引擎解析。表示 {{ data|safe }} 未被视图中的 data 值替换。

您需要将代码从 pandas_bootstrap_table.js 移动到 Django 模板引擎将用其实际内容替换 data 的值的某个位置。效果为：

# 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>