Передайте список Django в качестве аргумента в Javascript

У меня есть список, переданный через контекст в html-страницу проекта Django, который я хочу прочитать внутри .js, содержащего код chartjs. Проблема в том, что .js читается как строка, а не как список/массив.

views.py

def index(request):
    context = {
        "data": [1, 2, 3, 4, 5]}
    return render(request, 'index.html', context)

Затем, в html странице я должен передать {{ data|safe }} в javascript следующим образом:

<script src='{% static "js/chart.js/linechart.js" %}'
   var label = "fakelabel";
   var index = {{ data|safe }};
></script>

Внутри .js я читаю вход 'index' как:

document.currentScript.getAttribute("index")

Как я могу это исправить? ('label' правильно читается как str).

Вы можете использовать ajax для получения списка или диктуемых данных из представлений и вам нужно добавить jQuery cdn в html файл.

from django.http import JsonResponse
def indexAjax(request):
   context={"data":[1,2,3,4,5]}
   return JsonResponse(context,safe=False)

Внутри вашего js файла или тега скрипта

function fun(){
   $.ajax({
      url:"{% url'indexAjax" %},
      dataType:'json',
      type:'GET',
      success:function(res){
           console.log(res.data)
           //here you can write your chartjs
           }
    })}

{{ data|safe }} не является безопасным способом вывода объекта Python как JavaScript.

Используйте json_script, если хотите быть в безопасности

Вот как это сделать

<script>
   var index = {{ data|json_script:'mydata' }};
<script>

Затем вы можете использовать переменную index в другом сценарии следующим образом:

  <script>
    const data = JSON.parse(document.getElementById('mydata').textContent);
  </script>

Правильный способ решения вышеупомянутой проблемы следующий:

views.py

Внутри представления Django вам нужно передать каждый список внутри диктата 'context' в json.dumps:

def index(request):
   context ={"data": json.dumps([1, 2, 3, 4, 5])}
   return render(request, 'index.html', context)

charts.html

Затем в html-скрипте вы должны добавить {{ data|json_script:"index" }}, как вы это делаете с тегом 'static'. Затем, всегда в вашем .html скрипте вам не нужно передавать список 'index'. Поэтому, когда вы вызываете javascript внутри вашего .html, вам просто нужно передать:

{{ data|json_script:"index" }}
<script src='{% static "js/chart.js/linechart.js" %}'
   var label = "fakelabel";
></script>

js/chart.js/linechart.js

Наконец, внутри отдельного javascript (в данном случае "js/chart.js/linechart.js"), мы можем получить список с помощью:

JSON.parse(document.getElementById('index').textContent)
Вернуться на верх