11521 sujets

JavaScript, DOM et API Web HTML5

1st API

Bonjour, j ai regardé des cours et souhaite donc m'entrainer. j'ai codé une page blanche sur laquelle j'ai deux inputs: département et ville.
J'arrive à obtenir la liste des départements, mais je n'arrive à obtenir les villes qui se trouvent dans ces départements.
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
<h1>tp</h1>
<p>departement : </p>
<select name="departement" id="departement">
   <option value="">- choisis ton departement -</option>
</select>
<select name="villes" id="villes">
   <option value="">- choisista ville -</option>
</select>
<script src="main.js"></script>
</body>
</body>
</html>


function initDepartement () {
  fetch("https://geo.api.gouv.fr/departements")
  .then(response => response.json())
  .then(data => {
    const selectDepartement = document.querySelector('#departement')
      data.forEach(departement => {
        const optionDepartement = document.createElement('option')
        optionDepartement.innerHTML = departement.code+" - "+departement.nom
        selectDepartement.appendChild(optionDepartement)
      });
  }) 
}

function initCommune () {
  const selectCommune = document.querySelector('#villes');

  selectCommune.addEventListener('change', (event) => {
    const endpoint ='geo.api.gouv.fr/departements/communes/'+event.target.value
    fetch(endpoint)
    .then(response => response.json())
    .then(data => {
      data.communes.forEach(communes => {
        const optionCommune = document.createElement('option')
        optionCommune.innerHTML = communes.code+" - "+communes.nom
        selectCommune.appendChild(optionCommune)
      }); 
    });
});

}
initDepartement()

merci de votre aide ^^
Modérateur
Bonjour,

1) Dans initDepartement() il faudrait ajouter une ligne qui met le code du département dans l'attribut "value" de chaque "option" du "select" des départements. Normalement, ce n'est pas plus dur que de modifier le "innerHTML" d'une "option". Je te laisse chercher où et comment vu que c'est très probablement un exercice.

2) Il faut ajouter à la fin de la fonction initDepartement() le "handler" pour l'évenement "change" au select des départements (je sais, c'est probablement du chinois Smiley lol ), et non pas le faire dans initCommune() comme tu l'as tenté. Dans ce "handler", il faudra appeler la fonction initCommune(). Par exemple :
  selectDepartement.addEventListener('change', (event) => {
    initCommune(event.target.value); // dans event.target.value se trouvera normalement le code du département si on fait correctement l'étape 1
  });

Cette fonction se déclenchera quand le select changera de valeur, et aura pour effet de remplir le select des communes.

3) Il faudrait que la fonction initCommune() ait en paramètre le code du département. Et l'url pour aller chercher les villes (ce que tu mets dans la variable endpoint) est de la forme 
'https://geo.api.gouv.fr/departements/'+departement+'/communes'
... et non pas de la forme que tu as utilisée dans ton code. Ça ne risquait pas de fonctionner. En fait, toute ta fonction initCommune() est à refaire.

4) La suite de la fonction initCommune() est très similaire à la fonction initDepartement() que tu as déjà faite et qui marche. Au lieu de modifier le select des départements, on modifie le select des communes et au lieu d'utiliser l'API pour les départements, on utilise l'API pour les communes comme expliqué au 3). Et aussi, il ne faut pas oublier d'effacer la liste des communes à chaque fois qu'on change de département.

Je te laisse chercher comment modifier la fonction initCommune() en fonction des indications ci-dessus. C'est quasiment du copier-coller si tu as compris le principe.

Amicalement,
Sujet clos
Aller à