Передайте список 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)