M07

Filtro e Pesquisa com JSON Server

Demonstra como usar os recursos nativos de filtragem do JSON Server via query string: filtragem por campo exato, pesquisa full-text com ?q= e combinação de múltiplos parâmetros usando URLSearchParams.

Como funciona o filtro no JSON Server

Filtro por campo exato

/api/contatos?cidade=Recife
Retorna apenas os registros onde cidade === "Recife".

Pesquisa full-text

/api/contatos?q=maria
Busca "maria" em todos os campos de texto do registro.

Filtros combinados

/api/contatos?cidade=SP&categoria=trabalho
Múltiplos parâmetros funcionam como AND lógico.

URLSearchParams

Use new URLSearchParams() para montar a query string dinamicamente sem concatenação manual de strings.

Padrão de filtro com URLSearchParams

javascript

async function filtrar() {
  const cidade    = document.getElementById('sel-cidade').value;
  const categoria = document.getElementById('sel-categoria').value;
  const texto     = document.getElementById('txt-busca').value.trim();

  const params = new URLSearchParams();
  if (cidade)    params.append('cidade', cidade);
  if (categoria) params.append('categoria', categoria);

  let url = `/api/contatos?${params.toString()}`;
  const contatos = await fetch(url).then(r => r.json());

  // Filtro local por texto livre (abrange campos que JSON Server não indexa)
  const resultado = texto
    ? contatos.filter(c => JSON.stringify(c).toLowerCase().includes(texto.toLowerCase()))
    : contatos;

  renderizar(resultado, contatos.length);
}

Exercícios sugeridos

Adicione um filtro por estado (UF) ao formulário de pesquisa.
Implemente ordenação dos resultados por nome ou cidade clicando no cabeçalho da coluna.
Adicione paginação: exiba 5 resultados por vez com botões "Anterior" e "Próximo".
Salve os filtros selecionados no localStorage para preservá-los ao recarregar a página.