如何在 Django 中将变量（列表）传递给 JavaScript？答案

【问题标题】：How to pass variable (list) to JavaScript in Django?如何在 Django 中将变量（列表）传递给 JavaScript？
【发布时间】：2021-05-15 17:48:04
【问题描述】：

我正在尝试使用 Chartjs 和 Django 创建图表，当我尝试将数据从 views.py 传递到 js 代码时遇到问题。

所以，这是我在 views.py.. 中的代码。

def home(request):

    labels = ["A", "B", "C", "D"]
    data = [1,2,3,4]
    return render(request, 'home.html',{'labels': labels
                     ,'data': data,})

这是我在 home.html 中的代码部分 ..

<script>

       var labels = {{labels}};
       var data = {{data}};

      var ctx = document.getElementById('myChart').getContext('2d');
     var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: labels,
            datasets: [{
                label:"chartLabel",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data:data,
            }]
        },

        // Configuration options go here
        options: {}
});
      </script>

当我在 js 中使用这些拖线时放..

  var labels = ["A", "B", "C", "D"];
      var data =  [1,2,3,4];

我的代码可以正常工作，而不是这两条。

 var labels = {{labels}};
 var data = {{data}};

这是我的页面源

【问题讨论】：

标签： javascript python django chart.js

【解决方案1】：

您需要将数据呈现为字符串，以便输出是浏览器可以解释的有效 javascript：

var data = {{ str(data) }};
var labels = {{ str(labels) }};

上述表达式将数组转换为数组的字符串表示形式，因此[1, 2, 3] 将呈现为'[1,2,3]'，["a", "b", "c"] 将呈现为'["a","b","c"]'。

检查这是否正常工作的一种快速方法是右键单击并查看页面源代码，然后向下滚动到此 javascript 并验证它是否看起来像有效的变量声明。如果它似乎不起作用，请使用您在检查页面源时看到的呈现的 javascript 编辑您的问题。

【讨论】：

【解决方案2】：

对于dict或list，最好使用JSON，因为它会呈现一个Javascript数据结构（JSON中的JS指的是Javascript）

import json

return render(request, 'home.html', {
    'labels': json.dumps(labels),
    'data': json.dumps(data)
})

那么在Django模板中，json.dumps()调用的输出就是一个有效的JS对象。

var labels = {{labels}};
var data = {{data}};

【讨论】：

【解决方案3】：

我发现渲染任何数据最可靠的方法是使用safe django template filter, so it doesn't try and encode any special fields。

return render(request,
              'home.html',
             {'labels': json.dumps(labels),'data': json.dumps(data)}
)

然后使用safe 模板过滤器进行渲染。这个

<script>

   var labels = {{labels | safe}};
   var data = {{data | safe}};

   ...

</script>

【讨论】：