image

Access unlimited bootcamps and 750+ courses forever

70
%OFF
Content list
Article image
Heytor Carvalho
Heytor Carvalho20/11/2022 18:09
Share

Um Erro muito esquisito

  • #JavaScript

Eu tô fazendo um sistema de busca de CEP's usando a API do Via CEP, e está acontecendo de: no Console aparecer todas as informações do JSON porém na página, aparece como "Undefined" já tentei usar o Stringfy mas não está funcionando, alguém poderia me dar um auxílio por gentileza ??

Share
Recommended for you
Savegnago - Lógica de Programação
GFT Start #6 - Lógica de Programação
Potência Tech iFood - Desenvolvimento de Jogos
Comments (6)
Heytor Carvalho
Heytor Carvalho - 21/11/2022 22:28
<!-- Código da Página HTML --!>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <script type="text/javascript" src="script.js"></script>
  <title>Consumindo API Via CEP</title>
</head>
<body>
  <div id="container">
      <div id="conteudo">
          <h1>Consulta CEP via endereço</h1>
          <label>Digite o endereço:</label>
          <p><input type="text" id="rua" placeholder="Nome da Rua"></p>
          <p><input type="text" id="cidade" placeholder="Cidade"></p>
          <p><input type="text" id="estado" placeholder="UF"></p>
          <button onclick="consultaEndereco()">Consultar</button>
          <div id="resultado">
              <p>Seu Resultado :</p>
          </div>
      </div>
  </div>

<!-- Código do Arquivo JavaScript --!>

function consultaEndereco() {
  let rua = document.querySelector('#rua').value;
  let cidade = document.querySelector('#cidade').value;
  let uf = document.querySelector('#estado').value;
  
  if (rua == ''||cidade == ''||uf == '') {
      alert('Por Favor Preencha Todos os Campos');
  }


  let url = `https://viacep.com.br/ws/${uf}/${cidade}/${rua}/json/`;
  fetch(url).then(function(response) {
     response.json().then(function(data) {
      console.log(data);
      exibirEndereco(data)
     })
  });        
}


function exibirEndereco(dados){
  console.log(dados);
  
  let resultado = document.querySelector('#resultado');
  if (dados.erro) {
      resultado.innerHTML = 'Não foi Possível Localizar o CEP Para Este Endereço';
  }


  else{
      resultado.innerHTML = `<p>CEP : ${dados.cep}</p>
                             <p>DDD : ${dados.ddd}</p>`;
  }                        


}


}
Márcio Cardoso
Márcio Cardoso - 21/11/2022 09:10

Ta vindo undefined porque vc deve ta setando errado para mostrar os valores no dom.

seria isso se eu entendi certo:

data.cep

data.logradouro

data.complemento

e por ae vai.

Felipe Silva
Felipe Silva - 20/11/2022 20:27

Boa noite,


Não seria porque porque você preencheu como strings dentro dos campos onde seriam números?


De qualquer forma, coloca o código ai para darmos uma olhada.


Abraço.

RP

Regis Pedreira - 20/11/2022 19:41

Boa noite Heytor.


No console apresenta o retorno como um array, provavelmente você deve estar tentando acessar diretamente, ao invés de acessar a primeira posição.


De qualquer forma, o mais indicado é postar parte do código para auxiliar na identificação do erro.

ES

Elenicio Souza - 20/11/2022 19:21

Opá colega, mostra o código ai. Tem várias formas de fazer isso. Na própria api já tem excelentes exemplos.

Willian Silva
Willian Silva - 20/11/2022 19:13

Boa noite consegue mandar o trecho do código que recebe as informações e repassa para tela?


Pela sua imagem o ViaCep retorna um array contendo s endereços, verifique se está pegando de fato a primeira opção destro deste array para utilizar na exibição.