Consumindo a API ViaCEP com JavaScript

Suporte
,
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