On dispose d'une API qui fournit la liste des villes des Côtes d'armor.
Celle-ci est accessible à l'adresse suivante :
https://geo.api.gouv.fr/communes?codeDepartement=22
A partir de celle-ci, et en utilisant Vue js, on souhaite obtenir l'affichage ci-dessous :
_fichiers/image001.png)
L'affichage des villes est affiné en fonction de la saisie dans la zone input.
Correction
Fichier html :
<html>
<head>
<script>
</script>
<style type="text/css">
input,select
{
font-family:Arial;
font-size:11px;
background-color:lightgray;
width:220;
}
</style>
</head>
<body>
<div id='app'>
<form name='f1'>
Liste des communes des Côtes d'armor : <br/>
<input v-model="touches" type='text' id='saisieVille' @KeyUp='fetchAPI'>
<br/>
<select id='afficheVille' size='10' v-model="ville">
<option v-for="objet in tabObjets" @click="afficheDetails">{{objet.nom}}</option>
</select>
</form>
<br>
<span id='details' v-show="!vide">
<h2>Détails sur {{ ville }} :</h2>
<ul>
<div v-html="detailVille"> </div>
</ul>
</span>
</div>
<script src="https://unpkg.com/vue@next"></script> <!-- pour utiliser vue js -->
<!-- pour utiliser axios (facilite les requetes http) -->
<script src="https://unpkg.com/axios/dist/axios.min.js" ></script>
<script src="./app.js"></script> <!-- notre application vue js -->
</body>
</html>
Fichier app.js final :
const API = "https://geo.api.gouv.fr/communes?codeDepartement=22";
const app = Vue.createApp({
data() {
return {
donnees : [],
tabObjets : [],
objet : {},
touches : '',
ville : '',
vide: true,
detailVille: '',
}
},
mounted: function () {
this.fetchAPI();
},
methods : {
async fetchAPI() {
await axios.get(API)
.then((response)=>{
this.tabObjets=[]
this.donnees = response.data
//parcours du json donnees. A chaque "tour" pays reçoit un objet ({nom: ...})
for (ville of this.donnees)
{
if (ville.nom.startsWith(this.touches))
{
this.tabObjets.push(ville);
}
}
})
.catch((error)=>{
console.log(error)
})
},
afficheDetails()
{
this.vide = false;
for(objet of this.tabObjets)
{
//console.log(this.ville + "vs:" + objet.nom);
if (this.ville == objet.nom)
{
this.detailVille = "<li>Code postal : " + objet.codesPostaux[0] + " - Code commune : " + objet.code + " - Population : " + objet.population + " habitants.</li>";
console.log(this.detailVille);
}
}
}
}
});
const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"