Как получить значение defaultdic в JS (фреймворк Django)?

Я хочу использовать chartjs для отображения графика на странице (фреймворк Django).

views.py

chart_data = defaultdict(<class 'int'>, {'3': 2, '2': 2, '8': 2, '5': 2, '7': 1})
context["chart_data"] = chart_data

home.html

<script type="text/javascript">
  var my_chart = "{{ chart_data }}";
</script>

my_chart.js

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: Object.values(my_chart),
    }]
  };

Но это не сработало. Когда я использовал console.log(Object.values(my_chart)) для проверки, я обнаружил, что Object.values(my_chart) возвращает ['d', 'e', 'f', 'a', 'u', 'l', 't', 'd', 'i', 'c', 't', '(', '&', 'l', 't', ';', 'c', 'l', 'a', 's', 's', ' ', '& ', '#', 'x', '2', '7', ';', 'i', 'n', 't', '&', '#', 'x', '2', '7', ';', '&', 'g', 't', ';', ', ', ', '{', '&', '#', 'x', '2', '7', ';', '3', '&', '#', 'x', '2', '7', ';', ': ', ' ', '2', ', ', ', ', '&', '#', 'x', '2', '7', ';', '2', '&', '#', 'x', '2', '7', ';', ':', ', '2', ', ', ', ', ', '&', '#', 'x', '2', '7', ';', '8', '&', '#', 'x', '2', '7', ';', ': ', ' ', '2', ',', ' ' ', '&', '#', ...], он просто разбирает каждую букву и символ словаря.

Знаете ли вы, как я могу получить значение?

Вы не должны передавать javascript путем рендеринга объекта в шаблоне. Это приведет к рендерингу как str(…) объекта. Возможно, для некоторых объектов это даст текст, который является допустимым выражением JavaScript, но часто, как в данном случае, это не так.

Вы можете использовать |json_script:… фильтр шаблона [Django-doc] для вывода данных в виде JSON объекта, а затем загрузить его в сценарий JavaScript, так:

{{ chart_data|json_script:"my_chart" }}

<script type="text/javascript">
var my_chart = JSON.parse(document.getElementById('my_chart').textContent)
const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: Object.values(my_chart),
    }]
  };
</script>
Вернуться на верх