Open Postcode

Appearance

Huisnummer zoeken ​

Als een gebruiker alleen een postcode invoert en je wilt alle bijbehorende huisnummers tonen (bijv. voor een dropdown), gebruik je dezelfde /api/address endpoint zonder huisnummer-parameter.

Endpoint ​

GET /api/address?postcode=

Voorbeeld response (suggestions) ​

json
{
  "error": "Huisnummer not found",
  "suggestions": [
    "26A",
    "26B",
    "26C",
    "26D",
    "26E",
    "26F",
    "28",
    "30",
    "32A"
  ]
}

UX-implementatie ​

  • Wanneer het huisnummer niet wordt gevonden: toon de suggestions in een select/dropdown.
  • Wanneer de lijst lang is, voeg een type-ahead of paging toe om performance te verbeteren.
  • Overweeg het tonen van buurt- / straatnaamcontext naast het huisnummer zodat gebruikers meteen herkennen welk resultaat hoort bij hun adres.

Voorbeeld: fetch en dropdown (concept) ​

js
async function fetchHuisnummers(postcode) {
  const res = await fetch(`/api/address?postcode=${encodeURIComponent(postcode)}`)
  const data = await res.json()
  if (data.suggestions) return data.suggestions
  return []
}

// Gebruik de array om opties in een <select> te vullen

Gebruiksscenario's ​

Soms wil je alle huisnummers binnen een postcode tonen of suggesties geven wanneer een gebruiker een foutief huisnummer invoert.

Voorbeeld: alle huisnummers bij een postcode ​

http
GET /api/address?postcode=1017XN

Als een exact huisnummer niet wordt gevonden geven we een suggestions-veld terug met mogelijke huisnummers.

UX-tip ​

  • Toon een dropdown met suggesties wanneer een huisnummer niet direct wordt gevonden.