在视图中创建JSON对象并以HTML形式传递

Question

views.py - Django 2.0.2

def hotels(request):
    list_of_hotels = Hotel.objects.order_by('hotel_name')
    template = loader.get_template('myapp/hotels.html')

    data = {}
    for each in list_of_hotels:
        data[str(each.hotel_name)] = 'null'
    json_data = json.dumps(data)

    context = {
        'list_of_hotels': list_of_hotels,
        'json_data': json_data,
    }
    return HttpResponse(template.render(context, request))

hotels.html

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">search</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Search</label>
      </div>
    </div>
  </div>
</div>

<script>
  var jsonObj = "{{json_data}}";
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: jsonObj,
    });
  });
</script>

I'm trying to parse a JSON Object from Django views into a script located inside the corresponding HTML page. I tried everything, but it just doesn't seem to work. I searched Stack Overflow for about an hour now, and based on all the answers came to these snippets of code, which still don't work. Any leads on how to go about it would be highly appreciated!

PS: In the script in hotels.html, the data takes in a JSON Object. For more details on the initialisation, refer to this .

PPS: I am an absolute noob in JavaScript/ jQuery.

Answer 1

Found a solution to my own problem after a lot of tries. Thanks to anyone who tried to help me. :)

hotels.html

<div class="row">
 <div class="col s12">
  <div class="row">
   <div class="input-field col s12">
    <i class="material-icons prefix">search</i>
    <input type="text" id="autocomplete-input" class="autocomplete">
    <label for="autocomplete-input">Search</label>
   </div>
  </div>
 </div>
</div>

<script type='text/javascript'>
  var jsonObj = {{ json_data|safe }};
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: jsonObj,
    });
  });
</script>

views.py

def hotels(request):

    list_of_hotels = Hotel.objects.order_by('hotel_name')
    template = loader.get_template('myapp/hotels.html')

    data = {}
    for each in list_of_hotels:
        data[str(each.hotel_name)] = None
    json_data = json.dumps(data)

    context = {
        'list_of_hotels': list_of_hotels,
        'json_data': json_data,
    }
    return HttpResponse(template.render(context, request))