No D25 vimos como criar gráficos na nossa página usando a library Chart js, que usa o JS no navegador para renderizar os gráficos. Criamos gráficos com dados aleatórios mas agora vamos criar os gráficos com os dados vindos da API.
Lembrando nosso arquivo routes, o endpoint /brasil:
Vamos tentar passar esses dados da variável "states", que está no return, para nosso front-end.
E como eu passo dados para o front-end usando o Flask?
É só lembrar do nosso template base:
Para passar variáveis para o front-end eu coloco a variável dentro de chaves duplas, não é mesmo?
Então basta eu abrir uma tag script e passar a variável para ser usada pelo JS, correto?
Algo assim:
Vamos ver os dados no nosso console:
Ué, eu não passei os dados para o JS? Cadê os dados sendo mostrados no console?
Vamos investigar um pouco. Veem a linha vermelha acima, indicando o erro? "Uncaught SyntaxError".
Do lado direito, se eu clicar em "brasil : 269" eu vou abrir a aba "sources" do chrome dev tools que vai me dizer onde está o erro:
A variável statesData mostrando esse array com essa formatação esquisita é a forma como o js está lendo os dados. Ou seja, ele não tá entendendo nada direito, tá com caracteres esquisitos como esses & # ; . E como eles deveriam ser exibidos? No Python eles aparecem assim:
![]()
O problema aí é que eu enviei dados para o JS como se eles ainda estivesse no formato aceito pelo Python, que é uma lista de dicionários, e o JS não se entende muito bem com o Python. O JS não entende dicionários, por exemplo (embora os objetos em JS sejam parecidos).
E por que no template dá certo? Porque ao puxar os dados do back-end para o template eu consigo ver normalmente no site os dados?
Por um motivo que eu já expliquei aqui. O template não é HTML, é um HTML renderizado pelo Python por meio do Flask. O que está ali no template é tudo código Python e não código HTML. O Python que gera o HTML usando o Flask.
E por que no JS isso não dá certo?
Porque o JS faz parte daquele grupo que chamamos de arquivos estáticos. São arquivos estáticos os arquivos CSS, os JS e as imagens. Eles não são renderizados pelo Python, pelo Flask...são arquivos que não são renderizados pelo framework. Então se não são criados pelo framework, eu tenho que saber conversar com eles.
Então, em resumo, o Python conversa bem com o template porque no fim das contas o template é código Python. O Python não conversa bem com o JS porque o JS não entende Python.
E como eu faço para o JS entender Python?
O JS entende um formato de arquivo que o Python também entende, que é o formato JSON. Eu posso dizer, no template, que os dados enviados estão em formato json, adicionando isso aqui no template:
Observem o "pipe", a barra na vertical, e o "to json". Agora tou dizendo pro template que os dados estão em formato JSON, pois o Flask converteu isso pra mim na hora de renderizar o template.
Vamos ver agora o resultado no console:
Pronto, agora eu consegui fazer o JS se entender com o Python. Estão falando a mesma língua.
Se eu for em "sources" novamente, vamos ver como os dados foram mostrados no JS:
Agora tá tudo certo. Os dados estão sem os caracteres estranhos (exceto por esses símbolos estranhos, como em "name", que temos São Paulo escrito como de um jeito esquisito. Mas isso é normal, é como o JSON interpreta acentos. Mas vejam que no print logo acima São Paulo tá escrito corretamente, pois o JS entende que esses símbolos são decorrentes de um acento.
Pronto, é assim que vamos passar os dados para o JS. Mas para fazer nossos gráficos eu preciso de um processamento no Python, que faremos no routes. Mas isso vai ficar para o D27.
