Ma 1e API
Résolu
RomainGA
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
RomainGA Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
RomainGA Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour, j'ai découvert, il y a peu, le concepte des api. j'ai beau suivre des tuto, rien y fait, je bloque.
Je veux juste creer un imput dans lequel on mettrait notre code postal. On obtiendrait alors des info sur sa ville; mais rien ne s affiche.
Merci
EDIT : Correction des balises de code ( ajout du LANGAGE )
Je veux juste creer un imput dans lequel on mettrait notre code postal. On obtiendrait alors des info sur sa ville; mais rien ne s affiche.
document.querySelector('#cp').addEventListener('input', function (){
if (this.value.length == 5) {
let url = `[https://geo.api.gouv.fr/communes?codePostal=%24%7Bthis.value%7D&fields=nom%2CcodesPostaux%2Cpopulation&format=json&geometry=centre%60];
fetch(url).then((response) => response.json().then((data) => console.log(data))
);
}
});
<!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> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <h1>api - td</h1> <form> <label for='cp'>Code postal : </label> <input type="text" maxlength="5" value="Code Postal" name='cp' id="cp"> </form> <script src="main.js"></script> </body> </html>
Merci
EDIT : Correction des balises de code ( ajout du LANGAGE )
1 réponse
-
Bonjour,
Ta variable url est foireuse.
Tu as mal fermé la string .. et pas fait de concaténation pour y intégrer la "value" de ton input..
Essaye comme çadocument.querySelector('#cp').addEventListener('input', function (){ if (this.value.length == 5) { let url = "https://geo.api.gouv.fr/communes?codePostal=" + this.value + "&fields=nom%2CcodesPostaux%2Cpopulation&format=json&geometry=centre%60"; console.log('URL',url); fetch(url).then((response) => response.json().then((data) => console.log(data)) ); } });
NB: Pense bien à vider le cache de ton navigateur pour être sûr qu'il prenne en compte les modifications.
