Postcode API voor JavaScript

Een adres ophalen met fetch

Stuur de postcode en het huisnummer mee als query-parameters en geef je API-token mee in de Authorization-header. Je krijgt een JSON-response met onder andere straatnaam en plaats terug.

async function lookupAddress(postcode, number) {
    const response = await fetch(
        `https://api.nederlandpostcode.nl/v1/address?postcode=${postcode}&number=${number}`,
        {
            headers: {
                Authorization: `Bearer ${process.env.NEDERLAND_POSTCODE_API_KEY}`,
            },
        }
    );

    if (!response.ok) {
        throw new Error('Adres niet gevonden');
    }

    return response.json();
}

Autocomplete in een formulier

Een typisch patroon: zodra de klant een geldige postcode en huisnummer heeft ingevuld, haal je het adres op en vul je de straat- en plaatsvelden automatisch in (en zet je ze read-only).

const postcode = document.querySelector('#postcode');
const number = document.querySelector('#number');

async function fill() {
    if (!postcode.value || !number.value) return;

    const { data } = await fetch('/api/address?' + new URLSearchParams({
        postcode: postcode.value,
        number: number.value,
    })).then((r) => r.json());

    document.querySelector('#street').value = data[0].street;
    document.querySelector('#city').value = data[0].city;
}

number.addEventListener('blur', fill);

Hier wijst /api/address naar je eigen backend-endpoint, dat de aanroep naar onze API met je live-token afhandelt. Zo blijft je token veilig.

React, Vue en andere frameworks

Omdat het om standaard fetch-aanroepen met JSON gaat, werkt dezelfde aanpak in elk framework: roep je backend aan in een effect of event-handler en zet het resultaat in je state. Geen aparte SDK nodig.

Bekijk alle endpoints en responsevelden in de API documentatie, of de prijzen.