How can I display a search result based on a filtered value provided by the user?

Question

I developed a filter system where it provides 3 options, such as property type, number of rooms and maximum price. Each time they select filter options, the user instantly receives a search result. For example, if the user has chosen the type of ownership of the apartment and the number of rooms as 4 and the maximum price of 12,000, then the user will receive those rents whose type of property is an apartment with 4 rooms of 12,000 marks. I developed the front end with React.js and was able to successfully get the user selected data. I also passed the data to ajax, but I do not know how to display the search results based on the filtered value provided by the user without loading the page.

Ajax Code

$.ajax({ type: 'GET', url: '/filter/space/', data{property:propertySelectedValue, room:roomSelectedValue, price:maxPrice}, success: function(data){ console.log(data['fields']); }, error: function(XMLHttpRequest, textStatus, errorThrown){ console.error("Status: " + textStatus); alert("Error: " + errorThrown); }, }); 

Views.py

 class FilterSpace(View): def get(self,request,*args,**kwargs): property = request.GET.get('property',None) room = request.GET.get('room', None) price = request.GET.get('price', None) rental = Rental.objects.all() if room: rental = rental.filter(room=room) print('rental',rental) if price: rental = rental.filter(price__lte=price) if property: rental = rental.filter(property=property) rental_json = serializers.serialize('json',rental) print('rental_json',rental_json) return HttpResponse(rental_json,content_type="application/json") 

Answer 1

for efficiency in python, you should find a way to filter once with all parameters, rather than filtering filtered filtered ones, but this is not necessary to view the result.

inside success: function(data){ you should use jQuery to place data on the page, you can start with something like

 function data2html(data) { ...// use .map and .join } $("#divid").append(data2html(data)) 

Answer 2

One thing you can consider is to convert html to a string ( django - render_to_string does not work ) on the server side and send it back to the ajax response along with the data. then replace the html that contains the list with the server displayed.

Django:

 def get_list(request, *args, **kwargs): items = Items.objects.filter(...) html = "" items = [] # actual data context = { "item_list": items, ... } for item in items: html = html + render_to_string(list_html_template, context, context_instance=RequestContext(request)) items.append(item.to_json()) # You have to define this if you want it. return JsonResponse({ "list_html": html, "items_data": itmes }) 

Template (list_html_template):

 {% for item in item_list %} <!-- render item here... --> {% endfor %} 

JavaScript:

 $.ajax({ url: "url_for_get_list_view", dataType: "json", ... success: function(json) { $(list_container).html(json.list_html); // Will replace any current html in this container (ie refresh the list). /* You can also do stuff with json.items_data if you want. */ } }); 

Answer 3

You can clear your view by doing something like this:

 class MyView(View): def get(self, request): results = Rental.objects.filter(**request.GET) return serializers.serialize('json', results) 

and when you return the data to your AJAX request, in the success part, just clear the table and repeat the results and add the rows to the now empty table with your data.