Autocomplete Belgique

Vue d'ensemble

ParamètresChaîne de requête

Réponses

{
  "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"
    }
  ]
}

Erreurs

{
  "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"
    }
  ]
}

Exemples de code

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

Nous vous encourageons à demander un exemple de code dans votre langue préférée.

Pas à pas

Créez un formulaire rapide pour tester la fonctionnalité Belgique Autocomplete en suivant les étapes ci-dessous.

1. Créez la page HTML

   Nous commençons par créer une page HTML vide, contenant une structure de page web minimale. Créez un nouveau fichier .html nommé pro6pp_belgique_autocomplete.html. Ajoutez le code suivant entre les balises <body> et </body>. Cela ajoute les champs de saisie pour saisir l'adresse.

   pro6pp_belgique_autocomplete.htmlCopier

   <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>

   Afficher tout le code

2. Ajoutez une interaction

   Ajoutez le code JavaScript suivant dans un fichier pro6pp_belgique_autocomplete.js séparé. Les ID et les noms de classe des éléments HTML doivent correspondre à ceux spécifiés dans ce fichier JavaScript afin d'obtenir des résultats corrects.

   pro6pp_belgique_autocomplete.jsCopier

   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);
       }
   });

   Afficher tout le code

3. Faites-le fonctionner

   Liez le fichier JavaScript à l'intérieur du pro6pp_belgique_autocomplete.html fichier juste avant de fermer la balise </body>.

   pro6pp_belgique_autocomplete.htmlCopier

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

   Pour accéder au service Web Pro6PP, vous devez demander votre clé d'autorisation personnelle. Cette clé vous est envoyée par e-mail juste après votre inscription. Remplacez l'espace réservé ci-dessus AUTH_KEY par votre clé d'autorisation personnelle.

   Si vous n'avez pas encore de compte, inscrivez-vous pour un essai gratuit de 2 mois. Après avoir créé votre compte, allez dans les détails de votre abonnement et copiez votre AUTH_KEY. Vous aurez besoin de cette clé pour authentifier vos demandes.

4. Le voir en action

   Une fois que vous avez terminé les étapes précédentes, il est temps de exécuter le formulaire localement dans votre navigateur. Vous devriez maintenant avoir deux fichiers dans le même dossier sur votre ordinateur :

   • pro6pp_belgique_autocomplete.html - la page HTML contenant le formulaire.
   • pro6pp_belgique_autocomplete.js - le fichier JavaScript qui gère l'interaction.

   Vous pouvez maintenant ouvrir le fichier HTML dans votre navigateur en double-cliquant dans votre explorateur de fichiers (par exemple, Finder sous macOS ou Explorateur de fichiers sous Windows). Vous pouvez également l'ouvrir manuellement dans le navigateur en utilisant le chemin complet file:///. Par exemple, vous pouvez ouvrir le fichier en utilisant le chemin complet file:/// :

   Exemples de chemins d'accès aux fichiersCopier

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

   Une fois la page ouverte, commencez à saisir les champs du formulaire et cliquez sur Submit pour voir la réponse de l'API s'afficher dans la section « Full Response ».