Consumindo a API ViaCEP com JavaScript

Suporte
,
1

Boa noite a todos,

Estou criando um formulário que através de um API, nos traz as informações de endereço abaixo:

formato da requisição via url: https://viacep.com.br/ws/13218840/json/
Retorno em JSON

    {
      "cep": "13218-840",
      "logradouro": "Avenida Doutor Walter Gossner",
      "complemento": "",
      "bairro": "Ivoturucaia",
      "localidade": "Jundiaí",
      "uf": "SP",
      "ibge": "3525904",
      "gia": "4078",
      "ddd": "11",
      "siafi": "6619"
    }

Para iniciar as tentativas li o post abaixo, para ter base de como codificar em javascript puro, porém, não estou conseguindo finalizar o código.

Esse é o código que estou colocando no LostFocus de um campo de texto, retirei as validações do readyState para simplificar meu primeiro exemplo.

    function Get(yourUrl){
      var Httpreq = new XMLHttpRequest(); // a new request
      Httpreq.open("GET",yourUrl,true);
      Httpreq.send();
      return Httpreq;          
    }
    console.log(Get('https://viacep.com.br/ws/13218840/json/'));

Saída no formulário:

Capturar
Capturar1795×786 93.2 KB

Consigo acessar o JSON que recebo de retorno da API, porém, não consigo acessar o response onde estão as informações que quero inserir nos campos do formulário.

Você poderiam me ajudar a retornar os valores de Endereço, cidades, estado no formulário?

Casos tenham conhecimento de uma API que também retorno latitude e longitude e seja free poderiam compartilhar comigo?

Obrigado.

2

Olá @Framos

O problema está justamente no fato de você ter parado de escutar o evento readyState .

Todas as requisições realizadas com XMLHttpRequest são assíncronas, e por isso não tem como saber o momento exato em que os dados serão retornados. Por este motivo, é necessário escutar o evento readyState, para saber quando a requisição recebeu uma resposta.

Você vai conseguir pegar o resultado na propriedade responseText do objeto XMLHttpRequest quando a resposta tiver sido obtida.

Aqui você encontra mais informações sobre o objeto XMLHttpRequest:

1 curtida
3

Obrigado Daniel, vou realizar a revisão do código e ver se funciona, porém, lembro do readyState estar me retornando 0 quando utilizei o exemplo completo, vou continuar tentado!!
Também vou verificar o post que você enviou para ter mais base para desenvolver o formulário.

4

@Framos, este Web Service da Via Cep é bem interessante.

Fiz a implementação para testar e funcionou bem. Implementei dessa forma:

Função de Inicialização

Função viaCepInit para configurar os campos que serão modificados na Consulta de CEP:

/**  Essa funcão configura um formulário para fazer a consulta de cep 
     usando o WebService "ViaCEP" e preencher os outros campos de endereço */
function viaCepInit(cepField, ufField, cidadeField, bairroField, ruaField) {

    // Ocorre quando o Formulário é criado no navedador
    latromi.formManager.setOnFormCreatedCallback(function (context) {
        var form = context.form;

        // Obtem o elemento CEP
        var clientId = context.form.fields[cepField].clientId;
        var input = document.querySelector('#' + clientId);

        if (!input) return;

        // Escuta o evento blur (lostfocus) do input CEP
        input.addEventListener('blur', function (ev) {

            var cep = ev.currentTarget.value.replace(/[^\d]/g, '');
            var url = 'https://viacep.com.br/ws/' + cep + '/json/';

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var result = JSON.parse(this.responseText);

                        // Preenche os campos
                        if (ufField) form.setFieldValue(ufField, result.uf);
                        if (cidadeField) form.setFieldValue(cidadeField, result.localidade);
                        if (bairroField) form.setFieldValue(bairroField, result.bairro);
                        if (ruaField) form.setFieldValue(ruaField, result.logradouro);

                    }
                }
            };
            xhttp.open('GET', url, true);
         xhttp.send();
        });
    });
 }

Usando a Função

Para usar, é só chamar função de inicialização passando o nome dos campos do Formulário.

image

/** Chama a função passando o nome de cada campo. Passe null se o campo não é usado.*/
viaCepInit('txtCep', 'txtUF', 'txtCidade', 'txtBairro', 'txtRua');
Essa chamada deve ser feita uma única vez através dos "Arquivos JavaScript" do Formulário, e não através de ações "Executar JavaScript" dos Procedimentos.
1 curtida
5

@daniel.giacomelli funcionou perfeitamente muito obrigado pela ajuda.

1 curtida