Using Ajax and Django - right way to pass json back to the template page

Question

I'm new to anything javascript and ajax, Python and Django, I can usually do the simple stuff to show model data on a web page, and fill forms etc.

I'm just trying to figure out how Django, python and javascript work together and thought I would try to use jvectormap as a learning example. When the mouse moves over the map, Ajax sends the country code and the country name to the view, and the view updates the model and records where the user clicked. Then below the map the country code and country name is shown. That works.

I want also send the animals in that country that was clicked back to template and show them below the map. I use the country code filter the National_Animals model. The queryset can be more than one animal for a country and convert that to a list into json.

My confusion is how to send that information (the json list of animals) back to the template. In the script in the template page, I have the 'search_term' and 'the_name' listed in the ajax data. Do I need to list all the keywords for the animals I want to send back? Or have a second form and ajax statement.

The template page is:

<div class="container p-0">
  <div class=map-container>
  <div id="world-map" style="height: 400px"></div>
  <script>
    $(function() {
      $('#world-map').vectorMap({
        map: 'world_mill_en',
        onRegionClick: function(event, code) {
          var message = (code);
          var the_url_is = "{% url 'mainapp:home2' %}";
          var map = $('#world-map').vectorMap('get', 'mapObject');
          var my_name=map.getRegionName(code);
          document.getElementById("country_code").innerHTML = code;
          document.getElementById("country_name").innerHTML = my_name;

          // now try ajax
          $.ajax({
            url: '/mainapp/video/search',
            data: {
              'search_term': code,
              'the_name':my_name,
            },
            dataType: 'json',
            success: function(data) {
              $('#world_map').text(data['Hello']);
            }
          });
          // // alert( code );
          // if (code == 'RU') {
          //   window.location.assign(the_url_is)
          }

        }
      });
    });
  </script>
    <a> The Country is: </a> <a id='country_name'></a> <a>    --  </a> <a id='country_code'></a>
<a id ='my_animals'></a>
</div>
</div>
</body>
</html>

The models are:

class Country_List(models.Model):
    country_code=models.CharField(max_length=255, default="")
    country_name = models.CharField(max_length=255, default="unknown")

class National_Animals(models.Model):
    creature_types = [
    ('animal', 'Animal'),
    ('bird','Bird'),
    ('reptile','Reptile'),
    ('fish', 'Fish'),
    ('insect','Insect'),
    ('mythical','Mythical'),
    ('unknown','Unknown')
    ]
    country_code=models.CharField(max_length=3, default="")
    country_name = models.CharField(max_length=100, default="unknown")
    creature=models.CharField(max_length=100, default="unknown")
    creature_type = models.CharField(max_length=20, choices=creature_types, default="unknown")
    latin_name=models.CharField(max_length=100, default="unknown")
    thumb_image=models.ImageField(upload_to='static/images/',default='static/images/default.png')

The View is with extra print statements since I was trying to make sure the json was right:

def video_search(request):
    countries_clicked=Country_List()
    search_form=SearchForm(request.GET)
    print('the request.get is ',request.GET)
    if search_form.is_valid():
        print('the request.get is ',request.GET)
        print('printing in terminal',search_form.cleaned_data['search_term'])
        print('printing in terminal',search_form.cleaned_data['the_name'])
        countries_clicked.country_code=search_form.cleaned_data['search_term']
        countries_clicked.country_name=search_form.cleaned_data['the_name']
        countries_clicked.save()
        the_last_code=Country_List.objects.last().country_code
        the_model=National_Animals.objects.filter(country_code=the_last_code).values()
        print(the_model)
        the_model_list=list(the_model)
        print(the_model_list)
        the_json_to_return = json.dumps(the_model_list)
        print('this is the json')
        print('')
        print(the_json_to_return)
        return JsonResponse({'Hello':the_json_to_return})
    return JsonResponse({'Hello':'Not Working'})

An example of the json I wanted to show under the map:

[{"id": 522, "country_code": "US", "country_name": " United States", "creature": "Bald eagle (national bird)", "creature_type": "Bird", "latin_name": "Haliaeetus leucocephalus", "thumb_image": "static/images/default.png"}, {"id": 523, "country_code": "US", "country_name": " United States", "creature": "American bison (national mammal)", "creature_type": "Animal", "latin_name": "Bison bison", "thumb_image": "static/images/default.png"}]