如何將變量（列表）傳遞給 Django 中的 JavaScript？

Question

我正在嘗試使用 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}};

這是我的頁面源

Answer 1

對於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()調用的 output 是一個有效的 JS ZA8ZCFDE6331CBD59EB2661

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

Answer 2

您需要將數據呈現為字符串，以便 output 是瀏覽器可以解釋的有效 javascript：

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

上述表達式將數組轉換為數組的字符串表示形式，因此[1, 2, 3]將呈現為'[1,2,3]'而["a", "b", "c"]將呈現為'["a","b","c"]' 。

檢查這是否正常工作的一種快速方法是右鍵單擊並查看頁面源代碼，然后向下滾動到此 javascript 並驗證它是否看起來像有效的變量聲明。 如果它似乎不起作用，請使用您在檢查頁面源時看到的呈現的 javascript 編輯您的問題。

Answer 3

我發現呈現任何數據的最可靠方法是使用safe的 django 模板過濾器，因此它不會嘗試對任何特殊字段進行編碼。

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

然后使用safe模板過濾器進行渲染。 這個

<script>

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

   ...

</script>