Uncaught SyntaxError: Неожиданный конец ввода JSON в JSON.parse (<anonymous>) в dashboard/:110:27 django python

Я работаю над графиком, который показывает данные на дашборде. Он берет данные из бд и пытается сделать из них json, но в html коде это не работает. показывает Uncaught SyntaxError: Неожиданный конец ввода JSON в JSON.parse ()

Это вид

def dashboard(request):
    mood_data = MentalHealthSurvey.objects.values(
        'mood').annotate(count=Count('mood'))
    stress_data = MentalHealthSurvey.objects.values(
        'stress_level').annotate(count=Count('stress_level'))

    # Serialize data for JavaScript
    mood_data_json = json.dumps(list(mood_data))
    stress_data_json = json.dumps(list(stress_data))

    context = {
        'mood_data_json': mood_data_json,
        'stress_data_json': stress_data_json,
    }

    
    return render(request, 'employees/dashboard.html', {'context': context})

это код шаблона.

{% extends 'employees/base_generic.html' %}
{% block title %}
  Employee Dashboard
{% endblock %}
{% block content %}
  <div class="container">
    <h2>Survey Data</h2>
    <canvas id="moodChart"></canvas>
    <canvas id="stressChart"></canvas>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    const moodData = JSON.parse('{{ mood_data_json|safe }}')
    console.log('moodData:', moodData)
    const stressData = JSON.parse('{{ stress_data_json|safe }}')
    
    const moodLabels = (moodData || []).map((item) => item.mood || 'Unknown')
    const moodCounts = (moodData || []).map((item) => item.count || 0)
    
    const stressLabels = (stressData || []).map((item) => item.stress_level || 'Unknown')
    const stressCounts = (stressData || []).map((item) => item.count || 0)
    
    const moodChart = new Chart(document.getElementById('moodChart'), {
      type: 'pie',
      data: {
        labels: moodLabels,
        datasets: [
          {
            data: moodCounts,
            backgroundColor: ['#28a745', '#ffc107', '#dc3545', '#17a2b8', '#6f42c1']
          }
        ]
      }
    })
    
    const stressChart = new Chart(document.getElementById('stressChart'), {
      type: 'bar',
      data: {
        labels: stressLabels,
        datasets: [
          {
            data: stressCounts,
            backgroundColor: ['#28a745', '#ffc107', '#dc3545']
          }
        ]
      }
    })
  </script>
{% endblock %}

Вернуться на верх