Passing variables from view to Javascript code in Django

Question

I have a template like the below in Django

{% extends 'reports/base.html' %}

{% block title %} Report Name {% endblock %}

{% block content %}
<!--
<div class="container-fluid">
  <div class="row"><div class="col">
    <ul class="list-group">
      {% for r in report_list %}
      <li class="list-group-item"><a class="link-offset-2 link-underline link-underline-opacity-0" href={% url 'reports' report_id=r.id %}>{{ r.report_name }}</a></a></li>
      {% endfor %}
    </ul>

  </div><div class="col"></div><div class="col"></div></div>
</div>-->
<div class="demo-container">
  <div id="sales"></div>
  <div id="sales-popup"></div>
</div>

<script>
  $(() => {
    let drillDownDataSource = {};
  
    $('#sales').dxPivotGrid({
      allowSortingBySummary: true,
      allowSorting: true,
      allowFiltering: true,
      allowExpandAll: true,
      showBorders: true,
      showRowGrandTotals: false,
      showColumnGrandTotals: false,
      fieldChooser: {
        enabled: true,
      },
      export: {
        enabled:true
        },
      onCellClick(e) {
        if (e.area === 'data') {
          const pivotGridDataSource = e.component.getDataSource();
          const rowPathLength = e.cell.rowPath.length;
          const rowPathName = e.cell.rowPath[rowPathLength - 1];
          const popupTitle = `${rowPathName || 'Total'} Drill Down Data`;
  
          drillDownDataSource = pivotGridDataSource.createDrillDownDataSource(e.cell);
          salesPopup.option('title', popupTitle);
          salesPopup.show();
        }
      },
      onExporting: function(e) { 
        var workbook = new ExcelJS.Workbook(); 
        var worksheet = workbook.addWorksheet('Main sheet'); 
        DevExpress.excelExporter.exportPivotGrid({ 
            worksheet: worksheet, 
            component: e.component,
            customizeCell: function(options) {
                var excelCell = options;
                excelCell.font = { name: 'Arial', size: 12 };
                excelCell.alignment = { horizontal: 'left' };
            } 
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer) { 
                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'PivotGrid.xlsx'); 
            }); 
        }); 
        e.cancel = true; 
    },
      dataSource: {
        fields: [
          /*{
          caption: 'primary_label',
          width: 120,
          dataField: 'primary_label',
          area: 'row',
        }, */{
          'caption': 'secondary_label',
          'dataField': 'secondary_label',
          'width': 150,
          'area': 'row',
          'expanded': true
        },
        {
          caption: 'account',
          dataField: 'account',
          width: 150,
          area: 'row',
          expanded: true
        },
        {
          caption: 'category',
          dataField: 'category',
          width: 150,
          area: 'row',
          expanded: true
        },
        {
          caption: 'subcategory',
          dataField: 'subcategory',
          width: 150,
          area: 'row',
          expanded: true
        }, {
          dataField: 'period',
          dataType: 'date',
          area: 'column',
        }, {
          caption: 'value_eth',
          dataField: 'value_eth',
          dataType: 'number',
          summaryType: 'sum',
          //format: 'Number',
          format: {
                type: "fixedPoint",
                precision: 0
            },
          area: 'data',
        },
      // Filters
        {
          area: 'filter', 
          dataField: 'secondary_label',
          filterType: 'include',
          filterValues: ['1.1. Staked Assets', '3.2. Operating Performance']
      },
      {
        area: 'filter', 
        dataField: 'account',
        filterType: 'include',
        filterValues: ['3.2.1. Net Revenue', '3.2.2. Cost of Revenue','1.1.1. Staked ETH']
    }],
        store: sales,
      },
    });
  
    const salesPopup = $('#sales-popup').dxPopup({
      width: 1360,
      height: 600,
      //resizeEnabled:true,
      contentTemplate(contentElement) {
        $('<div />')
          .addClass('drill-down')
          .dxDataGrid({
            width: 1260,
            height: 500,
            scrolling: {
              mode: 'virtual',
            },
            export: {
              enabled:true,
              allowExportSelectedData: true
              },
              onExporting(e) {
                const workbook = new ExcelJS.Workbook();
                const worksheet = workbook.addWorksheet('LIDO');
          
                DevExpress.excelExporter.exportDataGrid({
                  component: e.component,
                  worksheet,
                  autoFilterEnabled: true,
                }).then(() => {
                  workbook.xlsx.writeBuffer().then((buffer) => {
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'LIDO.xlsx');
                  });
                });
                e.cancel = true;
              },
            columns: ['period', 'primary_label', 'secondary_label', 'account','base_token_address','value_eth'],
          })
          .appendTo(contentElement);
      },
      onShowing() {
        $('.drill-down')
          .dxDataGrid('instance')
          .option('dataSource', drillDownDataSource);
      },
      onShown() {
        $('.drill-down')
          .dxDataGrid('instance')
          .updateDimensions();
      },
          
    }).dxPopup('instance');
  });
  
</script>
{% endblock %}

The portion where the field list definition starts, I wanted to make this dynamic and get the values from a view which has logic to determine the field list.

dataSource: {
        fields: [

Have the following on the view logic

    field_list = ['col1','col2']
    return render(request, 'reports/report.html', context={'field_list': field_list})

I tried using the Jinja expression within the javascript and it throws syntax error, how can I fix this.

      dataSource: {
        fields: [
        {% for f in field_list %}  
        {
          'caption': f,
          'dataField': f,
          'width': 150,
          'area': 'row',
          'expanded': true
        },
        {% endfor %}

Answer 1

The issue is that Django is not distinguishing between the openbrace and closebrace, { }, of the variables and those of the JavaScript.

With the django template language (which is similar to jinja, but not the same) you can use template tags to escape the { and }.

dataSource: {
    fields: [
    {% for f in field_list %}
    {% templatetag openbrace %}
      'caption': f,
      'dataField': f,
      'width': 150,
      'area': 'row',
      'expanded': true
    {% templatetag closebrace %},
    {% endfor %}
    ...

If you are using using jinja (this is not the default for django), then you can escape the braces like this:

dataSource: {
    fields: [
    {% for f in field_list %}
    {{ "{" }}
      'caption': f,
      'dataField': f,
      'width': 150,
      'area': 'row',
      'expanded': true
    {{ "}" }},
    {% endfor %}
    ...