Ma 1e API

Résolu/Fermé

RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 8 mars 2025 - Modifié le 22 janv. 2022 à 22:56
RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 8 mars 2025 - 23 janv. 2022 à 12:28

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.

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 )

A voir également:

Erreur inconnue de l'api « open collaboration service ». (0)
Erreur 0x80070643 - Accueil - Windows
Erreur 0 free - Forum Samsung
Service spouleur - Guide
Customer service epoch ✓ - Forum Vos droits sur internet
Erreur 0x80070643 Windows 10 : comment résoudre le problème de la mise à jour KB5001716 - Accueil - Windows

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
22 janv. 2022 à 23:02

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

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

RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 8 mars 2025 6
23 janv. 2022 à 12:28

Exact, merci beaucoup :)

Discussions similaires

erreur api sur kde neon

Impossible de valider captcha L'api ne fonctionne pas

Impossible de remplir les captcha

Erreur 1500 (une autre installation est en cour) LibreOffice

Périphérique ne peut pas démarrer. (Code 10)

erreur 1500