JsonResponse from Django app not showing in html table or console.log

Question

I have a Django app that parses a csv and stores the data in SQLite which works great and I can see the data in the admin panel. Now I'm having trouble displaying the data either in the front end as a table or in the console showing the dictionary.

views.py

def airpollution_table_data(request):
    table_data = {}
    pollutant_list = [pollutant for pollutant in Pollutant.objects.all()]
    country_list = [country for country in Country.objects.all()]
    for pollutant in pollutant_list:
        table_data[pollutant.name] = {}

        for i, country in enumerate(country_list):
            total = PollutantEntry.objects \
                .aggregate(total=Sum('pollution_level', filter=Q(pollutant=pollutant,
                                                                 country=country)))['total']

            minimum = PollutantEntry.objects \
                .aggregate(min=Min('pollution_level', filter=Q(pollutant=pollutant,
                                                               country=country)))['min']
            maximum = PollutantEntry.objects \
                .aggregate(max=Max('pollution_level', filter=Q(pollutant=pollutant,
                                                               country=country)))['max']
            count = PollutantEntry.objects.filter(pollutant=pollutant, country=country).count()
            units = PollutantEntry.objects.filter(pollutant=pollutant, country=country).first()
            units = units.units if units else ''
            if total is not None and count:
                table_data[pollutant.name][country.iso_code] = {'avg': total / count, 'min': minimum,
                                                                'max': maximum,
                                                                'limit': pollutant.limit_value, 'units': units}
    return JsonResponse(table_data)

URLs.py

from django.urls import path
from . import views

app_name = 'supplychain'

urlpatterns = [
    path('', views.airpollution, name='airpollution'),
    path('airpollution_table_data', views.airpollution_table_data, name='airpollution_table_data'),
    path('temp_country_creator', views.temp_country_creator, name='temp_country_creator')
]

welcome.html table code

{% extends 'base.html' %} 
{% load static%} 

   
   {% comment %} <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script> {% endcomment %}
   
  
   {% comment %} <script src="http://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css></script>
   <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> {% endcomment %}


{% block content %}
<!-- Upload File Section-->

<!-- Page level plugins -->
<script src="http://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js></script>
<script src="http://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js></script>


<section class="page-section mt-5" id="import-form">
  <div class="container">
    <!-- Upload Section Heading-->
    <h2
      class="page-section-heading text-center text-uppercase text-secondary mb-0"
    >
      Upload Data
    </h2>
    <!-- Icon Divider-->
    <div class="divider-custom">
      <div class="divider-custom-line"></div>
      <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
      <div class="divider-custom-line"></div>
    </div>
    <!-- Upload Data Section Form-->
    <div class="row justify-content-center">
      <div class="col-lg-8 col-xl-7">
        <form id="upload-file" name="upload-file",
              enctype="multipart/form-data" method="POST" action="{% url 'supplychain:airpollution' %}">
          {% csrf_token %}
          <!-- Year input-->
          <div class="form-floating mb-3">
            <input
              class="form-control"
              id="year"
              name="year"
              type="number"
              placeholder="year"
              data-sb-validations="required"
            />
            <label>Year</label>
            <div class="invalid-feedback" data-sb-feedback="name:required">
              A name is required.
            </div>
          </div>
          <!-- Data input-->
          <div class="form-floating mb-3">
            <input
              class="form-control"
              id="file"
              name="file"
              type="file"
              data-sb-validations="required"
            />
            <label>File</label>
            <div class="invalid-feedback" data-sb-feedback="email:required">
              An email is required.
            </div>
            <div class="invalid-feedback" data-sb-feedback="email:email">
              Email is not valid.
            </div>
          </div>
          <!-- Submit success message-->

            <div id="success">{{ message_success }}</div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-xl" id="upload" type="submit">Upload</button>
                        </div>

        </form>
      </div>
    </div>
  </div>
</section>

 <!-- Table Section-->
 <section class="page-section mt-5" id="data-table">
  <div class="container">
      <!-- Heading-->
      <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Data Table</h2>
      <!-- Icon Divider-->
      <div class="divider-custom">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
          <div class="divider-custom-line"></div>
      </div>
      <!-- Table-->
      <div class="row">
          <div class="col-lg-8 mx-auto">

              <table id="our-table" class="table">
                  <thead>
                  <tr>
                      <th scope="col">Pollutant</th>
                      <th scope="col">Country</th>
                      <th scope="col">Avg</th>
                      <th scope="col">Min</th>
                      <th scope="col">Max</th>
                      <th scope="col">Limit</th>
                      <th scope="col">Units</th>
                  </tr>
                  </thead>
                  <tbody id="table-body">

                  </tbody>
              </table>

          </div>
      </div>
  </div>
</section>


{% endblock %} 

{% block js %}
 

    <script>
        $(document).ready(function () {

            $.get("airpollution_table_data", function (data) {
              console.log(data)
            });
        })
    </script>

{% endblock%}

Initially I was trying to show the data in a html table using JavaScript but that wasn't working so I tried to do console.log and I'm still unable to see anything in the network console in Google Chrome.

What might be wrong?