Получение списка из Django в Javascript в виде массива

Question

У меня есть список python, сгенерированный моим views.py в Django, и я хотел бы передать его в javascript в моем HTML-шаблоне.Кажется, я не могу получить его в javscript в виде массива ... Мне нужно оценить, содержит ли список / массив определенные числа, но он выглядит как строка.

Я передаю список в мой HTMLтакой шаблон:

def get_context_data(self, **kwargs):
    context = super(dashboardView, self).get_context_data(**kwargs)
    mylist = [10,22,33,45]
    context['mylist'] = mylist
    return context

Когда я использую:

<h1 id = "list"> {{mylist}}</h1>

, он отображается в браузере и отображается как [10,22,33,45]

Тогда в моем шаблоне я использую JavaScript, который у меня есть:

var mylist = document.getElementById("list").innerHTML;
for(i = 0; i < mylist.length; i++){
    console.log(mylist[i])
};

это возвращает в консоли:

'
[
1
0
,

2
2
........

Я хочу:

10
22
33
45

IЯ пытался преобразовать в JSON в Python и проанализировать его в JavaScript, но не могу преобразовать эту строку в массив или продолжает получать ошибки.Есть идеи для лучшего метода здесь?

Answer 1

Установите значение списка в JavaScript, а не в HTML.

<script>
var mylist = {{mylist}};
for(i = 0; i < mylist.length; i++){
    console.log(mylist[i])
};
<\ script>

Это необходимо сделать в файле шаблона HTML, а не во внешнем файле JS.

Answer 2

Вы можете просто использовать тег tojson для преобразования списка Python в массив js.

Мне понравится -

var mylist = {{mylist|tojson}};
for(i = 0; i < mylist.length; i++){
    console.log(mylist[i])
};

Попробуйте и дайте мне знать, если возникнут какие-либо проблемы.

Answer 3

В вашем случае проще всего отправить список в виде строки ','.join(mylist).И тогда в ваших шаблонах вы можете просто использовать split(',') в js.

views

mylist = [10,22,33,45]
context['mylist'] = ','.join([str(i) for i in mylist])

html & js

var mylist = document.getElementById("list").innerHTML;
mylist = mylist.split(',')
for(i = 0; i < mylist.length; i++){
    console.log(mylist[i])
};

Или, если вашjs также есть в шаблоне

var mylist = '{{mylist}}'.split(',');
for(i = 0; i < mylist.length; i++){
    console.log(mylist[i])
};