Django update template div with success data from Ajax

Question

I have select option and selecting option I run ajax to fetch filtered data from my model. The following are my view:

my template with script and console log also I updated below:

I need help how to update my list in the template with new list fetched by success(books) ajax. ( $('#stock_list').html([books]) is not updating the list )

View.py

def get_stock_list(request):
if request.method == "GET":
    book_type = request.GET.get('book_type')
    books = list(TextBook.objects.filter(type=book_type).values())
    return JsonResponse({"books": books})

stock_report.html:

 {% extends 'wstore_base_generic.html' %}

 {% block content %}
 <div class="row">
  <div class="col-lg-12 mt-4">
    <div class="card shadow"  id="stock_report">
        <div class="card-header text-center">                
            <h3 class="display-5">
                Stock Report
            </h3>
             <div class="text-right">


            <h5>
                <select id="book_type" name="book_type" >
                <option  value="" selected="selected">---SELECT---</option>
                   {% regroup books by type as type_list %}
                      {% for type in type_list %}
                            <option value="{{ type.grouper }}">{{ type.grouper }}</option>
                        {% endfor %}
                 </select> </h5>
             </div>
        </div>
        <div class="card-body" id="stock_list">
            <table id="customers" >
                <thead>
                    <tr>
                        <th>Item Code</th>
                        <th>Item Description</th>
                        <th>Open Qty</th>
                        <th>Received qty</th>
                        <th>Return Qty</th>
                        <th>Issue Qty</th>
                        <th>Adj Qty</th>
                        <th>Balance Qty</th>
                    </tr>                        
                </thead>
                <tbody>

                    {% if books %}

                    {% for book in books %}
                    <tr>

                        <td> <a href="{% url 'select_stock_report' book.id %}">{{ book.code }}</a></td>
                        <td>{{book.name}}</td>
                        <td>{{book.open_qty}}</td>
                        <td>{{book.recived_qty}}</td>
                        <td>{{book.return_qty}}</td>
                        <td>{{book.issue_qty}}</td>
                        <td>{{book.adj_qty}}</td>
                        <td>{{book.bal_qty}}</td>
                    </tr>
                    {% endfor %}
                    {% else %}
                        <tr class="text-center">
                            <td colspan="4">No Transaction have been made yet</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>                
        </div>            
    </div>
    <div class="card">
        <div class="card-footer">
            <button class="btn btn-success" id="print_stock" 
onclick="printDiv('stock_report')">Print</button>
        </div>
    </div>
</div>
</div>
{%  endblock %}
{% block js %}
<script>

 $(document).on('change', '#book_type', function(){
   var that = $(this)
 $.ajax(
    {
        type: "GET",
        url: "/get_stock_list",
        dataType: "json",
        data: {
            'book_type': $(this).val(),
            'csrfmiddlewaretoken': '{{csrf_token}}'
        },
        success: function (books) {
            console.log(books);
            $('#stock_list').html([books]);



        }
    })})
 </script>
 {% endblock %}

I am getting console.log(books)

 {books: array(4)}

 {
     "books": [
    {
        "id": 1,
        "code": "LKG001",
        "type": "BOOK",
        "name": "LKG BOOK 1",
        "open_qty": "0",
        "recived_qty": "328",
        "return_qty": "0",
        "issue_qty": "111",
        "adj_qty": "4",
        "bal_qty": "213",
        "avgcost": "100.55",
        "price": "100.00"
    },
    {
        "id": 2,
        "code": "UKG001",
        "type": "BOOK",
        "name": "UKG BOOK 1",
        "open_qty": "0",
        "recived_qty": "17",
        "return_qty": "0",
        "issue_qty": "9",
        "adj_qty": "0",
        "bal_qty": "8",
        "avgcost": "200.00",
        "price": "200.00"
    },
    {
        "id": 3,
        "code": "UKG002",
        "type": "BOOK",
        "name": "UKG002 BOOKS",
        "open_qty": "0",
        "recived_qty": "0",
        "return_qty": "0",
        "issue_qty": "0",
        "adj_qty": "1",
        "bal_qty": "-1",
        "avgcost": "0.00",
        "price": "200.00"
    },
    {
        "id": 4,
        "code": "001",
        "type": "BOOK",
        "name": "001 TEST",
        "open_qty": "0",
        "recived_qty": "0",
        "return_qty": "0",
        "issue_qty": "0",
        "adj_qty": "0",
        "bal_qty": "0",
        "avgcost": "0.00",
        "price": "0.00"
    }
 ]
 }

Answer 1

As your data return is json you can use $.each loop to iterate through your json array then use value.keyname to get value from json and append these values inside tds and finally add this html generated inside your table tbody.

Demo Code :

//suppose this is return from ajax
var books = {
  "books": [{
      "id": 1,
      "code": "LKG001",
      "type": "BOOK",
      "name": "LKG BOOK 1",
      "open_qty": "0",
      "recived_qty": "328",
      "return_qty": "0",
      "issue_qty": "111",
      "adj_qty": "4",
      "bal_qty": "213",
      "avgcost": "100.55",
      "price": "100.00"
    },
    {
      "id": 2,
      "code": "UKG001",
      "type": "BOOK",
      "name": "UKG BOOK 1",
      "open_qty": "0",
      "recived_qty": "17",
      "return_qty": "0",
      "issue_qty": "9",
      "adj_qty": "0",
      "bal_qty": "8",
      "avgcost": "200.00",
      "price": "200.00"
    },
    {
      "id": 3,
      "code": "UKG002",
      "type": "BOOK",
      "name": "UKG002 BOOKS",
      "open_qty": "0",
      "recived_qty": "0",
      "return_qty": "0",
      "issue_qty": "0",
      "adj_qty": "1",
      "bal_qty": "-1",
      "avgcost": "0.00",
      "price": "200.00"
    },
    {
      "id": 4,
      "code": "001",
      "type": "BOOK",
      "name": "001 TEST",
      "open_qty": "0",
      "recived_qty": "0",
      "return_qty": "0",
      "issue_qty": "0",
      "adj_qty": "0",
      "bal_qty": "0",
      "avgcost": "0.00",
      "price": "0.00"
    }
  ]
}


/*$(document).on('change', '#book_type', function(){
   var that = $(this)
 $.ajax(
    {
        type: "GET",
        url: "/get_stock_list",
        dataType: "json",
        data: {
            'book_type': $(this).val(),
            'csrfmiddlewaretoken': '{{csrf_token}}'
        },
        success: function (books) {
            console.log(books);*/
var html = "";
//loop through json array return
$.each(books.books, function(key, value) {
  //append tr
  html += `<tr> <td> <a href="{% url 'select_stock_report' ${value.id} %}">${ value.code }</a></td><td>${value.name}</td><td>${value.open_qty}</td><td>${value.recived_qty}</td><td>${value.return_qty}</td><td>${value.issue_qty}</td><td>${value.adj_qty}</td><td>${value.bal_qty}</td></tr>`
})

$('#stock_list tbody').html(html); //add datas inside tbody
/* }
    })})*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body" id="stock_list">
  <table id="customers">
    <thead>
      <tr>
        <th>Item Code</th>
        <th>Item Description</th>
        <th>Open Qty</th>
        <th>Received qty</th>
        <th>Return Qty</th>
        <th>Issue Qty</th>
        <th>Adj Qty</th>
        <th>Balance Qty</th>
      </tr>
    </thead>
    <tbody>
      <!--data will come here -->

    </tbody>
  </table>
</div>