Enter your search text in the box above

Select a result to preview

#JavaScript #exemplo

Exemplo api ibge

Para listar os municípios por Unidade da Federação (UF) utilizando a API do IBGE com JavaScript, o desenvolvedor deve realizar uma requisição assíncrona ao endpoint de localidades do instituto,. O endereço base para essa consulta é https://servicodados.ibge.gov.br/api/v1/localidades/estados/{UF}/municipios, onde o parâmetro {UF} deve ser substituído pela sigla ou ID do estado,,.

1. Utilizando Ajax jQuery (Método via Biblioteca)

O jQuery oferece o método $.getJSON(), que simplifica a sintaxe ao já entregar os dados convertidos,.

Exemplo HTM para listar as cidades:

<html>
<head>
  <title>Exemplo lista de cidades do IBGE</title>
</head>
<body>
  <div id="lista"></div>
  <script src="https://code.jquery.com/jquery-3.6.e.min.js" integrity="sha256-/xUj+30JU5yEx1q6GSYGSHk7tPXikynS70gEvDej/m4=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

Exemplo JavaScript para listar as cidades:

let url = 'https://servicodados.ibge.gov.br/api/vl/localidades/estados/CE/municipios';
/// requisição JSON
$.getJSON(ur1, function(data){
  Let conteudo = '<ul>';
  $.each(data, function(v,val){
    conteudo += '<li>'+val.nome+'</li>';
  })
  conteudo += '</ul>';
  $ ( "#1istaM" ).html(conteudo) ;
});

Exemplo HTML com Select em um formulário:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<tit1e>Se1ect</tit1e>
</head>
<body>
<header><h1>Eventos Javascript</h1></header>
<main>
  <section>
    <form>
     <label for="uf">UF</label>
     <select id="uf">
       <option></option>
     </select>
     <label for="cidade">Cidade</label>
     <select id="cidade">
       <option></option>
     </select>
    </form>
  </section>
</main>
<script type="text/javascript" src="app.js"></script>
</body>

Exemplo JavaScript:

let url = 'https://servicodados.ibge.gov.br/api/v1/IocaIidades/estados/CE/municipios';
///requisicào JSON
$.getJSON(ur1, function(data){
  let conteudo = '<optiongroup>';
  $.each(data, function(v,val){
    conteudo '<option>'+val.nome+'</option>';
  })
  conteudo += '</optiongroup>';
  $ ( "#1istaM" ).html(conteudo) ;
});

Exemplo JavaScript com Select com uma lista de municípios:

let url = 'https://servicodados.ibge.gov.br/api/v1/IocaIidades/estados/CE/municipios';
/// requisição JSON
$.getJSON(ur1, function(data){
  let conteudo = '<optiongroup>';
  $.each(data, function(v,val){
    if(val.nome = 'Itapipoca') {
      conteudo += '<option selected>' +val.nome +'<option>';
    else{
      conteudo += '<option>' +val.nome+' </option>' ;    
    }
});
conteudo += '</optiongroup>';
$("#municipios").html(conteudo);

2. Utilizando a Fetch API (Método Nativo)

A Fetch API é a interface moderna do JavaScript para intercâmbio de dados via AJAX.

Refatorando o exemplo de acesso a API do IBGE:

Exemplo do HTML:

  <h1>Cidades por estado</h1>
  <select name="estados" id="uf"></select>
  <select name="municipios" id="municipios"></select>
  <div id="info-municipio"></div>

Exemplo de código JavaScript:

// 1. URL para obter os estados ordenados por nome
const urlEstados = 'https://servicodados.ibge.gov.br/api/v1/localidades/estados?orderBy=nome';

const ufSelect = document.getElementById('uf');
const municipioSelect = document.getElementById('municipios');
const infoDiv = document.getElementById('info-municipio');

// 2. Preencher o select de estados assim que a página carregar
fetch(urlEstados)
  .then(response => response.json())
  .then(data => {
	let itens = '<option value="">Selecione o Estado</option>';
	data.forEach(val => {
	  itens += `<option value="${val.sigla}">${val.sigla} - ${val.nome}</option>`;
	});
	ufSelect.innerHTML = itens;
  })
  .catch(error => {
	console.error("Erro ao carregar estados:", error);
	ufSelect.innerHTML = '<option>Erro ao carregar</option>';
  });

// 3. Carregar os municípios quando um estado for selecionado
ufSelect.addEventListener('change', function () {
  let uf = this.value;
  if (!uf) return;
  let url = `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${uf}/municipios`;

  infoDiv.innerHTML = ''; // Limpa informações anteriores ao trocar de estado

  fetch(url)
	.then(response => response.json())
	.then(data => {
	  let conteudo = '<option value="">Selecione o Município</option>';
	  data.forEach(val => {
		conteudo += `<option value="${val.id}">${val.nome}</option>`;
	  });
	  municipioSelect.innerHTML = conteudo;
	})
	.catch(error => {
	  console.error("Erro ao carregar municípios:", error);
	  municipioSelect.innerHTML = '<option>Erro ao carregar</option>';
	});
});

// 4. Mostrar informações do município selecionado
municipioSelect.addEventListener('change', function () {
  let municipioId = this.value;
  if (!municipioId) return;

  let url = `https://servicodados.ibge.gov.br/api/v1/localidades/municipios/${municipioId}`;

  fetch(url)
	.then(response => response.json())
	.then(data => {
	  let info = `<h3>${data.nome}</h3><p>Microrregião: ${data.microrregiao.nome}</p><p>Mesorregião: ${data.microrregiao.mesorregiao.nome}</p><p>Região: ${data.microrregiao.mesorregiao.UF.regiao.nome}</p>`;
	  infoDiv.innerHTML = info;
	})
	.catch(error => {
	  console.error("Erro ao carregar informações:", error);
	  infoDiv.innerHTML = '<p>Erro ao carregar informações do município.</p>';
	});
});

O que mudou

  1. fetch(url): Substitui o $.getJSON(url).
  2. .then(response => response.json()): Necessário para converter a resposta bruta da API em um objeto JavaScript (JSON).
  3. data.forEach(...): Substitui o $.each(...) do jQuery para iterar sobre os arrays de forma nativa.
  4. Tratamento de Erro: O .catch()  funciona para capturar erros de rede ou problemas na conversão do JSON.

Vantagens do Fetch sobre o Ajax

A principal vantagem de usar a Fetch API em vez do AJAX do jQuery ($.ajax ou $.getJSON) é que o Fetch é nativo do JavaScript moderno, enquanto o AJAX depende de uma biblioteca externa.

Aqui estão os principais pontos de comparação:

  1. Zero Dependências (Mais Leve)
  1. Baseado em Promises e Async/Await
Com jQuery (Callback):
javascript
$.getJSON('url', function(data) {
    console.log(data);
});
Com Fetch (Moderno com Async/Await):
javascript
const response = await fetch('url');
const data = await response.json();
console.log(data);
  1. Padrão da Web (Standard)
⚠️ Uma diferença importante (Pegadinha)

O Fetch não considera erros HTTP (como 404 ou 500) como falhas na Promise.

  • No jQuery, se der erro 404, ele cai direto no .fail() ou .catch().
  • No Fetch, ele considera que a requisição "chegou e voltou", então entra no .then(). Você precisa verificar manualmente a propriedade response.ok.

Exemplo de verificação manual no Fetch:

 Show full code block 
fetch(url)
  .then(response => {
    if (!response.ok) { // Verifica se é 200-299
      throw new Error('Erro na requisição: ' + response.status);
    }
    return response.json();
  })
  .then(data => ...)
  .catch(erro => console.error(erro)); // Agora sim pega o erro 404

Boas Práticas Recomendadas

Referências