Data Science and Machine Learning - #18 Aplicação Real III (Ajax)

No tutorial de hoje aprenderemos como realizar filtros de dados com Pandas utilizando o ajax de maneira dinâmica e sem refresh de página.

Ajax e Pandas

app/views.py

Vamos preparar primeiramente a views para que ela realize o filtro e envie os dados para o template:

from django.shortcuts import render
from django.http import HttpResponse
import numpy as np
from django.http import JsonResponse
import pandas as pd
import json

df = pd.read_csv('app/static/data/netflix_titles.csv')
data = {}

#Template da Home
def home(request):
    #data['dados']=df[(df['release_year']>2009) & (df['country']=='Brazil')]\
    data['dados']=df\
        .drop(['show_id','date_added'],axis=1)\
        .dropna()\
        .head(20)\
        .to_html(index=False,classes=['table','table-striped','mt-5'])
    data['countryFilter']=df['country'].sort_values().unique()
    return render(request,'index.html',data)

#Requisição para filtro de país
def countryFilter(request):
    if request.body:
        field = json.loads(request.body.decode('utf-8'))
        search = field['country']
        df2=df.dropna()
        data['dados']=df2[df2['country'].str.contains(search)]\
        .to_html(index=False,classes=['table','table-striped','mt-5'])
        return JsonResponse({'data':data['dados']})

app/templates/index.html

No template index vamos exibir os dados filtrados:

{% extends 'main.html' %}
{% block content %}
    <div class="col-6 m-auto">
        <form action="">
            {% csrf_token %}
            <select class="form-control mt-5" name="country" id="country" required>
                <option value="">Selecione o País</option>
                {% for countries in countryFilter %}
                    <option value="{{countries}}">{{countries}}</option>
                {% endfor %}
            </select>
        </form>
    </div>
    <div class="result col-10 m-auto">
        {% autoescape off %}
         {{dados}}
        {% endautoescape %}
    </div>
{% endblock %}

app/static/js/javascript.js

Iniciaremos então o ajax com Javascript no sentido de realizar o filtro sem o refresh de página:

(function(win,doc){
    'use strict';

    doc.querySelector('#country').addEventListener('change',async(event)=>{
        event.preventDefault();
        let req=await fetch('http://localhost:8000/countryFilter/',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json',
                'X-CSRFToken':doc.querySelectorAll('input')[0].value
            },
            body:JSON.stringify({
                'country':doc.querySelector('#country').value
            })
        });
        let res=await req.json();
        doc.querySelector('.result').innerHTML=res.data;
    },false);

})(window,document);

app/templates/main.html

Não esqueça de linkar o javascript no arquivo main.html

<script src="{% static 'js/javascript.js' %}"></script>

project/urls.py

Vamos criar a rota para filtragem de países:

from django.contrib import admin
from django.urls import path
from app.views import home,countryFilter

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home),
    path('countryFilter/', countryFilter),
]

Por hoje é só! Sucesso nos códigos e na vida!