{"id":21134,"date":"2021-12-28T08:00:01","date_gmt":"2021-12-28T11:00:01","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=21134"},"modified":"2021-12-27T20:05:32","modified_gmt":"2021-12-27T23:05:32","slug":"como-consultar-cep-utilizando-javascript","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/como-consultar-cep-utilizando-javascript\/","title":{"rendered":"Como consultar CEP utilizando Javascript"},"content":{"rendered":"

Se voc\u00ea est\u00e1 desenvolvendo algum e-commerce, ou mesmo desenvolvendo algo precisa de cadastro onde necessita do endere\u00e7o, algo que facilita bastante para o usu\u00e1rio \u00e9 o preenchimento autom\u00e1tico a partir do CEP.<\/p>\n

Temos j\u00e1 no blog uma publica\u00e7\u00e3o de como fazer usando jQuery, mas agora faremos uma vers\u00e3o usando apenas javascript.<\/p>\n

A ideia \u00e9 quando usu\u00e1rio digita um cep, e clicar fora do campo de cep, os outros campos de endere\u00e7o sejam preenchidos automaticamente. Esse preenchimento \u00e9 trava de uma requisi\u00e7\u00e3o de uma API, que voc\u00ea informa o CEP, ele vai retornar os dados dos campos.<\/p>\n

Sabendo desse fluxo, vamos definir primeiramente o HTML<\/p>\n

No HTML ter\u00e1 apenas um formul\u00e1rio com campos de cep, rua, bairro, cidade, e estado.<\/p>\n

\r\n<form>\r\n  <div class="frm-group">\r\n    <label>CEP<\/label>\r\n    <input type="text" name="cep" \/>\r\n  <\/div>\r\n  \r\n   <div class="frm-group">\r\n      <label>Rua<\/label>\r\n      <input type="text" name="rua" \/>\r\n    <\/div>\r\n    \r\n    <div class="frm-group">\r\n      <label>Bairro<\/label>\r\n      <input type="text" name="bairro" \/>\r\n    <\/div>\r\n    \r\n    <div class="frm-group">\r\n      <label>Cidade<\/label>\r\n      <input type="text" name="cidade" \/>\r\n    <\/div>\r\n    \r\n    <div class="frm-group">\r\n      <label>Estado<\/label>\r\n      <input type="text" name="estado" \/>\r\n    <\/div>\r\n<\/form>\r\n<\/pre>\n
Esse formul\u00e1rio temos os campos input, que s\u00e3o englobados por uma div, com classe .frm-group, \u00e9 apenas pra fazermos uma pequena estiliza\u00e7\u00e3o via CSS. Vamos agora aplicar esse estiliza\u00e7\u00e3o<\/p>\n
\r\n.frm-group{\r\n  padding:5px;\r\n}\r\n.frm-group label{\r\n  display: block;\r\n}\r\n\r\n.frm-group:nth-child(1){\r\n  border: 1px solid #CCC;\r\n  background: #e5e5e5;\r\n  padding: 10px 5px;\r\n}\r\n<\/pre>\n
Fizemos apenas uma sele\u00e7\u00e3o das div.frm-group, para definir uma espa\u00e7amento, deixar o label como display:block para ele ocupar o espa\u00e7o para fazermos uma quebra de linha, e selecionamento o primeiro campo, que do CEP , para ter uma cor diferente.<\/p>\n
\"\"<\/p>\n
Agora vamos para o javascript, vamos definir uma fun\u00e7\u00e3o que auto-executa para definirmos um escopo para as que vari\u00e1veis fiquem nesse escopo, par evitar vazamento, e assim evitando poss\u00edveis bug caso voc\u00ea implemente em algum sistema existente.<\/p>\n
(function(){ \r\n\/*Aqui dentro ficar\u00e1 o script*\/ \r\n})(); <\/pre>\n
Agora vamos selecionar o campo de CEP e atribuir um evento blur nesse campo, que quando ao clicar fora dele, ele execute alguma a\u00e7\u00e3o<\/p>\n
(function(){ \r\n\r\n    const cep = document.querySelector("input[name=cep]");\r\n\r\n    cep.addEventListener('blur', e=> {\r\n    \r\n   });\r\n\r\n })(); <\/pre>\n
Pronto, agora precisamos recuperar o que foi digitado, fazer uma limpeza no campo, para deixar apenas n\u00fameros.<\/p>\n
(function(){ \r\n\r\n    const cep = document.querySelector("input[name=cep]");\r\n\r\n    cep.addEventListener('blur', e=> {\r\n         const value = cep.value.replace(\/[^0-9]+\/, '');\r\n         const url = `https:\/\/viacep.com.br\/ws\/${value}\/json\/`;\r\n   });\r\n\r\n })(); <\/pre>\n
Recuperamos o valor digitado no campo cep, atraves do atributo value, e usamos a fun\u00e7\u00e3o replace para remover todos os caracteres que n\u00e3o sejam numero, atrav\u00e9s de uma express\u00e3o regular.
\nAl\u00e9m disso, definimos uma varia\u00e7\u00e3o url, que cont\u00e9m o endpoint para fazer a requisi\u00e7\u00e3o para retornar as informa\u00e7\u00f5es do cep.<\/p>\n
Agora vamos realizar a requisi\u00e7\u00e3o usando a fun\u00e7\u00e3o fetch do javascript.<\/p>\n
(function(){ \r\n\r\n    const cep = document.querySelector("input[name=cep]");\r\n\r\n    cep.addEventListener('blur', e=> {\r\n         const value = cep.value.replace(\/[^0-9]+\/, '');\r\n         const url = `https:\/\/viacep.com.br\/ws\/${value}\/json\/`;\r\n\r\n       fetch(url)\r\n      .then( response => response.json())\r\n      .then( json => {\r\n      \t\t\r\n        \r\n      \r\n      });\r\n   });\r\n\r\n })(); <\/pre>\n
A fun\u00e7\u00e3o fetch <\/strong>retorna um Promisse<\/strong>, e acessamos a Promisse <\/strong>com m\u00e9todo then<\/strong>, definimos uma fun\u00e7\u00e3o an\u00f4nima<\/strong> que o par\u00e2metro ser\u00e1 objeto Response<\/strong>, e assim retornando o m\u00e9todo json <\/strong>do objeto Response<\/strong>, que tamb\u00e9m \u00e9 uma Promisse<\/strong>, e como vimos, para acessar uma Promisse usando o m\u00e9todo then<\/strong>, definimos uma fun\u00e7\u00e3o an\u00f4nima<\/strong> recebendo um json<\/strong>.<\/p>\n
Agora fizemos a requisi\u00e7\u00e3o, agora vamos, com Json retornando, vamos preencher os campos.<\/p>\n
(function(){ \r\n\r\n    const cep = document.querySelector("input[name=cep]");\r\n\r\n    cep.addEventListener('blur', e=> {\r\n         const value = cep.value.replace(\/[^0-9]+\/, '');\r\n         const url = `https:\/\/viacep.com.br\/ws\/${value}\/json\/`;\r\n\r\n       fetch(url)\r\n      .then( response => response.json())\r\n      .then( json => {\r\n      \t\t\t\r\n          if( json.logradouro ) {\r\n          \tdocument.querySelector('input[name=rua]').value = json.logradouro;\r\n                document.querySelector('input[name=bairro]').value = json.bairro;\r\n                document.querySelector('input[name=cidade]').value = json.localidade;\r\n                document.querySelector('input[name=estado]').value = json.uf;\r\n          }\r\n        \r\n      \r\n      });\r\n   });\r\n\r\n })(); <\/pre>\n
Na API do viacep, ele retorna algumas informa\u00e7\u00f5es, como logradouro (rua), bairro, localidade (cidade), uf (estado), ele tr\u00e1s tamb\u00e9m o c\u00f3digo do IBGE, mas n\u00e3o vamos utilizar. Vemos se o campo logradouro existe, se existir, selecionamos cada campo, e atribu\u00edmos os valores correspondentes.<\/p>\n