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.
On fournit le fichier html de départ :
<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 type='text' id='saisieVille' />
<br/>
<select id='afficheVille' size='10' >
<option></option>
</select>
</form>
<br>
<span id='details'>
<h2>Détails sur :</h2>
<ul>
</ul>
</span>
</div>
<!-- pour utiliser vue js -->
<script src= "https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- pour utiliser axios (facilite les requetes http) -->
<script src="https://unpkg.com/axios/dist/axios.min.js" ></script>
<!-- notre application vue js -->
<script src="./app.js"></script>
</body>
</html>
Et le fichier app.js de départ :
const API = "https://geo.api.gouv.fr/communes?codeDepartement=22";
const app = Vue.createApp({
data() {
return {
}
},
methods : {
async fetchAPI() {
await axios.get(API)
.then((response)=>{
})
.catch((error)=>{
console.log(error)
})
}
}
});
const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"
T.A.F.
Réaliser cette application