Передача словаря из представления Django в шаблон Django

Я пытаюсь передать следующий контекст из views.py в шаблон Django:

views.py:

def home(request):
     context = {
           'dict_1': {'key_1': ['val_11', 'val_12'], 'key_2': ['val_21', 'val_22']} 
          }
return render(request, 'app/home.html', context)

home.html:

<script type="text/javascript">
    var java_dict = {{ dict_1 }};
    console.log(java_dict);
</script>

При этом возникает ошибка: Uncaught SyntaxError: Unexpected token '&'

После исследования я вижу, что словарь в javascript читается следующим образом:

{&#39;key_1&#39;: [&#39;val_11&#39;, &#39;val_12&#39;], &#39;key_2&#39;: [&#39;val_21&#39;, &#39;val_22&#39;]}

что, вероятно, означает, что символ кавычек (') читается неправильно. Как исправить эту проблему?

По умолчанию все значения в шаблонах Django экранируют символы HTML в целях безопасности. Если вы хотите использовать этот словарь в JavaScript, вам следует использовать фильтр json_script. Пожалуйста, прочитайте документацию, чтобы понять, что происходит.

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

  1. Добавьте тег скрипта, содержащий ваш дикт, в шаблон

    {{ dict_1 |json_script:"ID_OF_NEW_SCRIPT_TAG" }}

  2. Загрузите значение dict в тег скрипта (я буду использовать имя, которое было в вашем примере)

    var java_dict = JSON.parse(document.getElementById('ID_OF_NEW_SCRIPT_TAG').textContent);

console.log(java_dict);

Замените ID_OF_NEW_SCRIPT_TAG на любой другой идентификатор, который имеет смысл для вас.

Контекстные данные, которые вы передаете в шаблоны Django, по умолчанию экранируются в целях безопасности.

Если вы уверены в безопасности данных, вы можете сделать следующее:

views.py

import json

def home(request):
    # Use JSON dump so that it will be a data that can be loaded in javascript
    context = {
        'dict_1': json.dumps({
            'key_1': ['val_11', 'val_12'], 'key_2': ['val_21', 'val_22']
        })
    }
return render(request, 'app/home.html', context)

home.html

<script type="text/javascript">
    var java_dict = {{ dict_1| safe }};  // Actually solve your problem. Don't escape the data.
    console.log(java_dict);
</script>
Вернуться на верх