How to properly return Json reponse to template for ajax/jquery?

Question

Here I am trying to search with the help of ajax and jquery with my django view. When I try to search like this by returning the JsonReponse instead of html_template it doesn't return data below the corresponding id in html

But When I return html from django view and create the new html for this searching results and including this template in the original template works perfectly but I find this a longer process So I tried to return json reponse from view and use that json objects in the template like this but it is not working.

How can I solve this ? I think I need to work on the ajax part .

def search_users(request):
    q = request.GET.get('q')
    if q:
        users = get_user_model().objects.filter(is_active=True).filter(profile__full_name__icontains=q)
        data = {'users': users}

    else:
        users = get_user_model().objects.filter(is_active=True)
        data = {'users':users}
    return JsonResponse(data)

ajax

$(function() {
    $('#search_users').keyup(function() {

        $.ajax({
            type: "GET",
            url: "{% url 'dashboard:search_users' %}",
            data: {
                'q' : $('#search_users').val(),

            },
            success: searchSuccess,
            dataType: 'json'
        });
    });
  });


function searchSuccess(data, textStatus, jqXHR)
{
    $('#search_users_results').json(data) #doing html instead of json works after returning html from django view 
}

In the terminal

TypeError: Object of type QuerySet is not JSON serializable
[15/Mar/2020 14:02:53] "GET /admin/dashboard/search/users/?q=tyj HTTP/1.1" 500 22660

Are you getting any exception on the server-side or client-side on making `ajax` call? — Ejaz, Mar 15 '20 at 07:52
Does this answer your question? [ is not JSON serializable](https://stackoverflow.com/questions/16790375/django-object-is-not-json-serializable) — Anurag Srivastava, Mar 15 '20 at 08:43
@AnuragSrivastava Yes I did `list(users` and this error gone but the search results are not appearing in my html ? — D_P, Mar 15 '20 at 08:46

Ejaz · Answer 1 · 2020-03-15T08:59:37.313

1

You have to extract values out of the query before sending it across instead of sending the model instance as it can't be serialized, is what the exception is saying.

So, you can just append .values() in the end and put in the list as below -

data = {'users': list(users.values())}

You may refer to it here.

edited Mar 15 '20 at 08:59

answered Mar 15 '20 at 08:51

Ejaz

1,504
3
25
51

How to properly return Json reponse to template for ajax/jquery?

1 Answers1