Autocomplete Belgien

Oversigt

ParametreQuerystreng

Svar

{
  "box": "b002",
  "boxPrefix": "bus",
  "country": "Belgium",
  "countryCode": "BE",
  "countryTranslations": [
    {
      "lang": "nl",
      "name": "België"
    },
    {
      "lang": "fr",
      "name": "Belgique"
    },
    {
      "lang": "de",
      "name": "Belgien"
    },
    {
      "lang": "en",
      "name": "Belgium"
    }
  ],
  "lat": 50.84534,
  "lng": 4.34108,
  "municipality": "Brussel",
  "municipalityTranslations": [
    {
      "lang": "nl",
      "name": "Brussel"
    },
    {
      "lang": "fr",
      "name": "Bruxelles"
    },
    {
      "lang": "de",
      "name": "Brüssel"
    }
  ],
  "postalCode": "1000",
  "province": "Brussel",
  "provinceTranslations": [
    {
      "lang": "nl",
      "name": "Brussel"
    },
    {
      "lang": "fr",
      "name": "Bruxelles"
    },
    {
      "lang": "de",
      "name": "Brüssel"
    }
  ],
  "region": "Brussel",
  "regionTranslations": [
    {
      "lang": "nl",
      "name": "Brussel"
    },
    {
      "lang": "fr",
      "name": "Bruxelles"
    },
    {
      "lang": "de",
      "name": "Brüssel"
    }
  ],
  "settlement": "Brussel",
  "settlementTranslations": [
    {
      "lang": "nl",
      "name": "Brussel"
    },
    {
      "lang": "fr",
      "name": "Bruxelles"
    },
    {
      "lang": "de",
      "name": "Brüssel"
    }
  ],
  "street": "Anderlechtsesteenweg",
  "streetNumber": 144,
  "streetTranslations": [
    {
      "lang": "nl",
      "name": "Anderlechtsesteenweg"
    },
    {
      "lang": "fr",
      "name": "Rue d'Anderlecht"
    }
  ]
}

Fejl

{
  "error_id": "MISSING_PARAMETER",
  "errors": [
    {
      "message": "Required parameter premise is missing. This address needs a premise alongside with the specified streetNumber: 1. Available premises for this address: a, b",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": [
        "premise",
        [
          "a",
          "b"
        ]
      ]
    }
  ]
}

{
  "error_id": "INVALID_VALUE",
  "errors": [
    {
      "message": "value is invalid",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": "postalCode",
      "value": "invalid"
    }
  ]
}

{
  "error_id": "UNAUTHORIZED",
  "errors": [
    {
      "message": "No authorization token provided",
      "help": "https://pro6pp.nl/docs/v2/redoc#section/Authentication"
    }
  ]
}

{
  "error_id": "NO_RESULTS_FOUND",
  "errors": [
    {
      "message": "No results found",
      "help": "https://pro6pp.nl/docs/v2/redoc"
    }
  ]
}

Kodeeksempler

curl "https://api.pro6pp.nl/v2/autocomplete/be?postalCode=1000&street=Anderlechtsesteenweg&streetNumber=144&box=bus+b002&authKey=YOUR_API_KEY"

Vi opfordrer dig til at anmode om eksempelkode på det sprog, du foretrækker.

Trin for trin

Opret en hurtig formular for at afprøve Belgien Autocomplete -funktionaliteten ved at følge nedenstående trin.

1. Opbyg HTML-siden

   Vi starter med at oprette en tom HTML-side, der indeholder en minimal websidestruktur. Opret en ny .html fil med navnet pro6pp_belgien_autocomplete.html. Tilføj følgende kode mellem <body> og </body> tags. Den tilføjer inputfelter til indtastning af adressen.

   pro6pp_belgien_autocomplete.htmlKopiér

   <form class="form" id="form">
     <div>Call</div>
     <div>
       <label for="postalCode">postalCode:</label>
       <input id="postalCode" class="postalCode" placeholder="1000"/>
       <label for="street">street:</label>
       <input id="street" class="street" placeholder="Anderlechtsesteenweg"/>
       <label for="streetNumberAndPremise">streetNumberAndPremise:</label>
       <input id="streetNumberAndPremise" class="streetNumberAndPremise" placeholder=""/>
       <label for="streetNumber">streetNumber:</label>
       <input id="streetNumber" class="streetNumber" placeholder="144"/>
       <label for="premise">premise:</label>
       <input id="premise" class="premise" placeholder=""/>
       <label for="box">box:</label>
       <input id="box" class="box" placeholder="bus b002"/>
     </div>
     <div>
       <span style="color: red" class="message"></span>
     </div>
     <div>
       <button type="submit">Submit</button>
     </div>
     <br />
     <div>Response</div>
     <br />
     <div>Full Response</div>
     <pre class="jsonResponse"></pre>
   </form>

   Vis hele koden

2. Tilføj interaktion

   Tilføj følgende JavaScript-kode i en separat pro6pp_belgien_autocomplete.js-fil. HTML-elementernes ID'er og klassenavne skal stemme overens med dem, der er angivet i denne JavaScript-fil, for at få de korrekte resultater.

   pro6pp_belgien_autocomplete.jsKopiér

   document.addEventListener("DOMContentLoaded", function() {
       const pro6ppAuthKey = "AUTH_KEY"; // Replace with your actual authorization key
   
       let messageSpan = document.querySelector(".message");
       let jsonResponseSpan = document.querySelector(".jsonResponse");
       const BASE_URL = "https://api.pro6pp.nl/v2";
   
       function fetchAddress(authKey) {
           const queryParams = {
               postalCode: document.getElementById("postalCode").value,
               street: document.getElementById("street").value,
               authKey: authKey
           };
           const optionalQueryParams = [
               "streetNumberAndPremise",
               "streetNumber",
               "premise",
               "box",
           ];
           for (const name of optionalQueryParams) {
               const value = document.getElementById(name).value;
               if (value !== "") {
                   queryParams[name] = value;
               }
           }
   
           let encodedUrl = new URL(`${BASE_URL}/autocomplete/be`);
           encodedUrl.search = new URLSearchParams(queryParams);
   
           fetch(encodedUrl)
               .then(async (response) => {
                   const data = await response.json();
                   if (data) {
                       messageSpan.textContent = "";
                       jsonResponseSpan.textContent = JSON.stringify(data, null, 2);
                   }
               })
               .catch((error) => {
                   console.error("Error fetching: ", error);
                   messageSpan.textContent = error.message;
               });
       }
   
       const form = document.getElementById("form");
       form.onsubmit = function (event) {
           event.preventDefault();
           fetchAddress(pro6ppAuthKey);
       }
   });

   Vis hele koden

3. Få det til at fungere

   Link JavaScript-filen inde i pro6pp_belgien_autocomplete.html lige før du lukker </body>-tagget.

   pro6pp_belgien_autocomplete.htmlKopiér

     ...
     <script src="pro6pp_belgien_autocomplete.js"></script>
    </body>
   </html>

   For at få adgang til Pro6PP-webservicen skal du anmode om din personlige autorisationsnøgle. Denne nøgle sendes til dig via e-mail lige efter tilmelding. Erstat ovenstående pladsholder AUTH_KEY med din personlige autorisationsnøgle.

   Hvis du ikke har en konto endnu, kan du tilmelde dig en gratis prøveperiode på 2 måneder. Når du har oprettet din konto, skal du gå til dine abonnementsoplysninger og kopiere din AUTH_KEY. Du skal bruge denne nøgle til at godkende dine anmodninger.

4. Se det i aktion

   Når du har gennemført de foregående trin, er det tid til at køre formularen lokalt i din browser. Du bør nu have to filer i den samme mappe på din computer:

   • pro6pp_belgien_autocomplete.html - HTML-siden
   • pro6pp_belgien_autocomplete.js - den JavaScript-fil, der håndterer interaktionen.

   Du kan nu åbne HTML-filen i din browser ved blot at dobbeltklikke på den i din filudforsker (f.eks. Finder på macOS eller File Explorer på Windows). Alternativt kan du åbne den manuelt i browseren ved at bruge den fulde file:///-sti. For eksempel:

   Eksempel på filstierKopiér

   file:///C:/Users/YourName/Documents/pro6pp_belgien_autocomplete.html
   file:///Users/yourname/Desktop/pro6pp_belgien_autocomplete.html

   Når siden åbnes, skal du begynde at skrive i formularfelterne og trykke på Submit for at se API-svaret blive vist i afsnittet »Full Response«.