M05

Passagem de Parâmetros entre Páginas

Demonstra como passar dados de uma página para outra usando a query string da URL. A lista de cidades linka para detalhes.html?id=3, e a página de detalhes usa URLSearchParams para ler o parâmetro id e buscar o registro específico no JSON Server.

Fluxo de navegação

index.html — Lista todas as cidades

Faz GET /api/cidades e renderiza um link para cada cidade: href="detalhes.html?id=${cidade.id}".

O usuário clica em uma cidade

O navegador navega para detalhes.html?id=3. O ID está na URL — sem sessão, sem localStorage necessário.

detalhes.html — Lê o parâmetro da URL

new URLSearchParams(window.location.search).get('id') extrai o valor "3" da query string.

Busca o registro específico no JSON Server

GET /api/cidades/3 retorna apenas a cidade com ID 3. Os dados são exibidos na página de detalhes.

Conceitos trabalhados

URLSearchParams

new URLSearchParams(window.location.search) parseia automaticamente a query string. .get('id') retorna o valor ou null se o parâmetro não existir.

GET /api/recurso/:id

Buscar um único registro por ID é mais eficiente que buscar todos e filtrar no cliente. O JSON Server retorna 404 se não encontrar.

Validação do parâmetro

Sempre verifique se o parâmetro existe antes de fazer o fetch. Se id for null, exiba uma mensagem de erro ao usuário.

Separação de responsabilidades

O app.js é compartilhado entre index.html e detalhes.html, definindo as funções de acesso à API separadamente da lógica de exibição.

Dados do JSON Server

GET /api/cidades — retorna todas

json lista

[
  {
    "id": 1,
    "cidade": "Belo Horizonte",
    "estado": "MG",
    "regiao": "Sudeste",
    "populacao": 2315560,
    "area": "331 km²",
    "clima": "Tropical"
  },
  { "id": 2, "cidade": "São Paulo", ... },
  { "id": 3, "cidade": "Rio de Janeiro", ... }
]

GET /api/cidades/1 — retorna um

json único registro

{
  "id": 1,
  "cidade": "Belo Horizonte",
  "estado": "MG",
  "regiao": "Sudeste",
  "populacao": 2315560,
  "area": "331 km²",
  "clima": "Tropical"
}

Padrão: ler parâmetro e buscar no servidor

javascript detalhes.html

// 1. Ler o parâmetro "id" da URL (detalhes.html?id=3)
const params = new URLSearchParams(window.location.search);
const id = params.get('id');

if (!id) {
  // Parâmetro ausente — exibir erro
  document.body.innerHTML = '<p>ID não informado na URL.</p>';
} else {
  // 2. Buscar o registro específico no JSON Server
  fetch(`/api/cidades/${id}`)
    .then(response => {
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.json();
    })
    .then(cidade => {
      // 3. Preencher a página com os dados
      document.getElementById('nome').textContent  = cidade.cidade;
      document.getElementById('estado').textContent = cidade.estado;
      document.title = `Detalhes – ${cidade.cidade}`;
    })
    .catch(err => {
      document.body.innerHTML = `<p>Erro: ${err.message}</p>`;
    });
}

Exercícios sugeridos

Adicione navegação entre cidades na página de detalhes: botões "Cidade anterior" e "Próxima cidade".
Exiba na lista o número de cidades carregadas: "5 cidades encontradas".
Adicione um campo curiosidade ao JSON e exiba-o na página de detalhes.
Implemente um mapa Mapbox na página de detalhes, posicionado nas coordenadas da cidade.
Adicione passagem de múltiplos parâmetros: detalhes.html?id=1&origem=lista.