Form filling with return of a json

Question

Form filling with return of a json

Navigation

#1 by (4 votes)
#2 by (0 votes)
#3 by (-1 votes)

9

I'm using a webService (viaCep) to automatically fill in the street, for when the user enters a zip code. The webService returns a json with the information of the street, and of that return I fill in the inputs referring (Street, city, etc ...).

When I manually enter the address information for the address, I get the same information in the request.

When the fields are populated with the WebService information, when the form request is obtained, the fields (City, State, Street, etc.) arrive null .

JavaScript that returns the json of the WebService:

function limpa_formulário_cep() {
   document.getElementById('endereco').value = ("");
   document.getElementById('bairro').value = ("");
   document.getElementById('cidade').value = ("");
   document.getElementById('estado').value = ("");
}

function meu_callback(conteudo) {
   if (!("erro" in conteudo)) {
      document.getElementById('endereco').value = (conteudo.logradouro);
      document.getElementById('bairro').value = (conteudo.bairro);
      document.getElementById('cidade').value = (conteudo.localidade);
      document.getElementById('estado').value = (conteudo.uf)
   }
    else {
       limpa_formulário_cep();
       alert("CEP não encontrado.");
   }
}

 function pesquisacep(valor) {

 var cep = valor.replace(/\D/g, '');

 if (cep != "") {
    var validacep = /^[0-9]{8}$/;
    if (validacep.test(cep)) {
        document.getElementById('endereco').value = "...";
        document.getElementById('bairro').value = "...";
        document.getElementById('cidade').value = "...";
        document.getElementById('estado').value = "...";

        var script = document.createElement('script');
        script.src = 'https://viacep.com.br/ws/' + cep + '/json/?callback=meu_callback';
        document.body.appendChild(script);
    } 
    else {
        limpa_formulário_cep();
        alert("Formato de CEP inválido.");
    }
} 
   else {
      limpa_formulário_cep();
   }
 };

Form that queries and receives the return from JS:

  <input name="cep" id="cep"  onblur="pesquisacep(this.value);" ng-model="contribuinte.cep" type="text"/>
  <input name="estado" id="estado"  ng-model="contribuinte.estado" charcase="uppercase" type="text"/>
  <input name="cidade" id="cidade" ng-model="contribuinte.cidade" type="text"/>

javascript html jquery angularjs

asked by anonymous 03.05.2018 / 17:22

3 answers

0

If you use AngularJS , use it in its entirety. Avoid mixing. The call with jsonp can be checked as below:

(function() {
  angular
    .module('appCep', [])
    .controller('CepController', CepController);

  CepController.$inject = ['$http'];

  function CepController($http) {
    const FORMATO = /^[0-9]{8}$/;
    var vm = this;
    vm.pesquisar = _pesquisar;

    _inicializar();

    function _inicializar() {
      vm.contribuinte = {};
      vm.mensagem = {};
      vm.mensagem.visivel = false;
      _limpar();
    }

    function _pesquisar() {
      var cep = vm.contribuinte.cep.replace(/\D/g, '');

      if (FORMATO.test(cep)) {
        $http.jsonp('https://viacep.com.br/ws/' + cep + '/json/?callback=JSON_CALLBACK').success(_atribuir);
      } else {
        _limpar();
        vm.mensagem.visivel = true;
      }
    }

    function _atribuir(dados) {
      if (dados.erro) {
        _limpar();
        vm.mensagem.visivel = true;
      } else {
        vm.contribuinte.logradouro = dados.logradouro;
        vm.contribuinte.bairro = dados.bairro;
        vm.contribuinte.estado = dados.uf;
        vm.contribuinte.cidade = dados.localidade;

        vm.mensagem.visivel = false;
      }
    }

    function _limpar() {
      vm.contribuinte.logradouro = '...';
      vm.contribuinte.bairro = '...';
      vm.contribuinte.estado = '...';
      vm.contribuinte.cidade = '...';
    }
  };
})();

div.vermelho {
  color: red;
}

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="appCep">
  <div ng-controller="CepController as vm">
    <label>CEP:</label> <input name="cep" id="cep" ng-blur="vm.pesquisar()" ng-model="vm.contribuinte.cep" type="text" />
    <br>
    <label>Logradouro:</label> <input name="logradouro" id="logradouro" ng-model="vm.contribuinte.logradouro" charcase="uppercase" type="text" ng-disabled="true" />
    <br>
    <label>UF:</label> <input name="estado" id="estado" ng-model="vm.contribuinte.estado" charcase="uppercase" type="text" ng-disabled="true" />
    <br>
    <label>Bairro:</label> <input name="bairro" id="bairro" ng-model="vm.contribuinte.bairro" type="text" ng-disabled="true" />
    <br>
    <label>Cidade:</label> <input name="cidade" id="cidade" ng-model="vm.contribuinte.cidade" type="text" ng-disabled="true" />

    <div ng-show="vm.mensagem.visivel" class="vermelho">
      CEP ({{vm.contribuinte.cep}}) não encontrado!
    </div>
  </div>
</div>

In the example above I created the Controller CepController where variables and functions are grouped together. The pesquisar function uses service $http to call URL and treat return. Note that I did not manipulate DOM directly at any time, thus utilizing the full potential of the framework.

16.05.2018 / 16:41

-1

First make sure the line

script.src = 'https://viacep.com.br/ws/' + cep + '/json/?callback=meu_callback';

is constructing the URL correctly. After that, I think it's worth using the properties of Angular to link HTML elements to your script.

document.getElementById('endereco').value = "...";
document.getElementById('bairro').value = "...";
document.getElementById('cidade').value = "...";
document.getElementById('estado').value = "...";

Must be replaced by

$scope.contribuinte.endereco = (conteudo.logradouro);
$scope.contribuinte.bairro = (conteudo.bairro);
$scope.contribuinte.cidade = (conteudo.localidade);
$scope.contribuinte.estado = (conteudo.uf);

14.05.2018 / 17:25

Doubt about mapping in the Entity Framework 6. Properties "readonly" How to calculate the difference between two dates ignoring the weekends in Java without using loop

score 4 · Accepted Answer

Evaluating the code posted seems to me that you are misusing or underutilizing AngularJS, thus losing the advantages of the framework. An example of this is in the code below that you are reluctant to use the model feature.

   document.getElementById('endereco').value = ("");

As well as several current frameworks, Angularjs works internally with the idea of life cycle, which makes it necessary to follow the philosophy adopted by it. Here is an example of how to consume the api you want in the default framework:

angular.module('app', [])
  .controller('CepController', function($http) {
    var vm = this;

    vm.pesquisarCep = function() {

      var cepValido = /^[0-9]{5}[-]?[0-9]{3}$/.test(vm.cep);

      if (cepValido) {

        $http.get("https://viacep.com.br/ws/" + vm.cep + "/json/").then(
          function(response) {
            vm.endereco = response.data;
          },
          function(error) {
            if (error.status === 404) {
              alert('Cep não encontrado');
            }
          } //callback para tratameno de falhas
        );
      } else {
        alert('CEP inválido!');
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><h2>ViaCep</h2><formng-app="app" ng-controller="CepController as vm">
  <input type="text" ng-model="vm.cep" />
  <button ng-click="vm.pesquisarCep()">Pesquisar</button>
  <hr>
  <table border>
    <tr style="background-color:aquamarine">
      <th>CEP</th>
      <th>Logradouro</th>
      <th>Complemento</th>
      <th>Bairro</th>
      <th>Localidade</th>
      <th>UF</th>
      <th>Unidade</th>
      <th>IBGE</th>
      <th>GIA</th>
    </tr>
    <tr ng-if="vm.endereco">
      <td>{{vm.endereco.cep}}</td>
      <td>{{vm.endereco.logradouro}}</td>
      <td>{{vm.endereco.complemento}}</td>
      <td>{{vm.endereco.bairro}}</td>
      <td>{{vm.endereco.localidade}}</td>
      <td>{{vm.endereco.uf}}</td>
      <td>{{vm.endereco.unidade}}</td>
      <td>{{vm.endereco.ibge}}</td>
      <td>{{vm.endereco.gia}}</td>
    </tr>
  </table>
</form>

Plunker: link