Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at dashboard/:110:27 django python

i am working on a chart that shows data on the dashbord. it's taking the data from the db and trying to make a json from that but in the html code it's not working. showing Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse ()

this is the view

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})

this is the template code.

{% 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 %}

Back to Top